This commit is contained in:
openhands committed
1 parent
8efd032cc6
commit
df38dccbf1
735 files changed
+128321
-120870
No files matched your search
@@ -1,159 +1,175 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTransition, useState, useRef, useEffect, useMemo } from "react";
|
||||
import { Search } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useEffect, useMemo, useRef, useState, useTransition } from "react";
|
||||
|
||||
const LOCALES: { code: string; label: string; lang: string }[] = [
|
||||
{ code: "nl", label: "Nederlands", lang: "nl" },
|
||||
{ code: "en", label: "English", lang: "en" },
|
||||
{ code: "de", label: "Deutsch", lang: "de" },
|
||||
{ code: "fr", label: "Français", lang: "fr" },
|
||||
{ code: "es", label: "Español", lang: "es" },
|
||||
{ code: "it", label: "Italiano", lang: "it" },
|
||||
{ code: "pt", label: "Português", lang: "pt" },
|
||||
{ code: "pl", label: "Polski", lang: "pl" },
|
||||
{ code: "sv", label: "Svenska", lang: "sv" },
|
||||
{ code: "tr", label: "Türkçe", lang: "tr" },
|
||||
{ code: "ro", label: "Română", lang: "ro" },
|
||||
{ code: "hu", label: "Magyar", lang: "hu" },
|
||||
{ code: "cs", label: "Čeština", lang: "cs" },
|
||||
{ code: "sk", label: "Slovenčina", lang: "sk" },
|
||||
{ code: "da", label: "Dansk", lang: "da" },
|
||||
{ code: "no", label: "Norsk", lang: "no" },
|
||||
{ code: "el", label: "Ελληνικά", lang: "el" },
|
||||
{ code: "bg", label: "Български", lang: "bg" },
|
||||
{ code: "hr", label: "Hrvatski", lang: "hr" },
|
||||
{ code: "sr", label: "Српски", lang: "sr" },
|
||||
{ code: "uk", label: "Українська", lang: "uk" },
|
||||
{ code: "ru", label: "Русский", lang: "ru" },
|
||||
{ code: "nl", label: "Nederlands", lang: "nl" },
|
||||
{ code: "en", label: "English", lang: "en" },
|
||||
{ code: "de", label: "Deutsch", lang: "de" },
|
||||
{ code: "fr", label: "Français", lang: "fr" },
|
||||
{ code: "es", label: "Español", lang: "es" },
|
||||
{ code: "it", label: "Italiano", lang: "it" },
|
||||
{ code: "pt", label: "Português", lang: "pt" },
|
||||
{ code: "pl", label: "Polski", lang: "pl" },
|
||||
{ code: "sv", label: "Svenska", lang: "sv" },
|
||||
{ code: "tr", label: "Türkçe", lang: "tr" },
|
||||
{ code: "ro", label: "Română", lang: "ro" },
|
||||
{ code: "hu", label: "Magyar", lang: "hu" },
|
||||
{ code: "cs", label: "Čeština", lang: "cs" },
|
||||
{ code: "sk", label: "Slovenčina", lang: "sk" },
|
||||
{ code: "da", label: "Dansk", lang: "da" },
|
||||
{ code: "no", label: "Norsk", lang: "no" },
|
||||
{ code: "el", label: "Ελληνικά", lang: "el" },
|
||||
{ code: "bg", label: "Български", lang: "bg" },
|
||||
{ code: "hr", label: "Hrvatski", lang: "hr" },
|
||||
{ code: "sr", label: "Српски", lang: "sr" },
|
||||
{ code: "uk", label: "Українська", lang: "uk" },
|
||||
{ code: "ru", label: "Русский", lang: "ru" },
|
||||
];
|
||||
|
||||
export function LanguageSwitcher() {
|
||||
const locale = useLocale();
|
||||
const router = useRouter();
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
|
||||
const locale = useLocale();
|
||||
const router = useRouter();
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
if (!search) return LOCALES;
|
||||
const q = search.toLowerCase();
|
||||
return LOCALES.filter(
|
||||
(l) =>
|
||||
l.label.toLowerCase().includes(q) ||
|
||||
l.code.toLowerCase().includes(q) ||
|
||||
l.lang.toLowerCase().includes(q),
|
||||
);
|
||||
}, [search]);
|
||||
const filtered = useMemo(() => {
|
||||
if (!search) return LOCALES;
|
||||
const q = search.toLowerCase();
|
||||
return LOCALES.filter(
|
||||
(l) =>
|
||||
l.label.toLowerCase().includes(q) ||
|
||||
l.code.toLowerCase().includes(q) ||
|
||||
l.lang.toLowerCase().includes(q),
|
||||
);
|
||||
}, [search]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
return () => document.removeEventListener("mousedown", handleClick);
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node))
|
||||
setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
return () => document.removeEventListener("mousedown", handleClick);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) setSearch("");
|
||||
}, [open]);
|
||||
useEffect(() => {
|
||||
if (!open) setSearch("");
|
||||
}, [open]);
|
||||
|
||||
function switchLocale(code: string) {
|
||||
if (code === locale) return;
|
||||
document.cookie = `NEXT_LOCALE=${code};path=/;max-age=31536000;samesite=strict;secure`;
|
||||
startTransition(() => router.refresh());
|
||||
setOpen(false);
|
||||
}
|
||||
function switchLocale(code: string) {
|
||||
if (code === locale) return;
|
||||
document.cookie = `NEXT_LOCALE=${code};path=/;max-age=31536000;samesite=strict;secure`;
|
||||
startTransition(() => router.refresh());
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
disabled={pending}
|
||||
className="nav-item flex items-center gap-1.5 bg-transparent text-[13px]"
|
||||
style={{ border: "none", cursor: "pointer", padding: "0 0.25rem" }}
|
||||
>
|
||||
<Image
|
||||
src={`/assets/images/icons/flags/${current.code}.png`}
|
||||
alt={current.lang}
|
||||
width={16}
|
||||
height={16}
|
||||
className="inline-block h-4 w-auto"
|
||||
/>
|
||||
<span>{current.code.toUpperCase()}</span>
|
||||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
return (
|
||||
<div className="relative" ref={ref}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen(!open)}
|
||||
disabled={pending}
|
||||
className="nav-item flex items-center gap-1.5 bg-transparent text-[13px]"
|
||||
style={{ border: "none", cursor: "pointer", padding: "0 0.25rem" }}
|
||||
>
|
||||
<Image
|
||||
src={`/assets/images/icons/flags/${current.code}.png`}
|
||||
alt={current.lang}
|
||||
width={16}
|
||||
height={16}
|
||||
className="inline-block h-4 w-auto"
|
||||
/>
|
||||
<span>{current.code.toUpperCase()}</span>
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
|
||||
<div className="px-3 pb-1">
|
||||
<div className="flex items-center gap-1.5 rounded-md border bg-background px-2 py-1.5 text-sm">
|
||||
<Search className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="flex-1 bg-transparent outline-none text-sm"
|
||||
style={{ border: "none", padding: 0, margin: 0 }}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-h-[260px] overflow-y-auto">
|
||||
{filtered.length === 0 && (
|
||||
<p className="px-3 py-4 text-center text-xs text-muted-foreground">Geen talen gevonden</p>
|
||||
)}
|
||||
{filtered.map((l) => (
|
||||
<button
|
||||
key={l.code}
|
||||
type="button"
|
||||
onClick={() => switchLocale(l.code)}
|
||||
className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium transition-all duration-100 rounded-lg mx-1 ${
|
||||
l.code === locale ? "opacity-100" : "opacity-70 hover:opacity-100"
|
||||
}`}
|
||||
style={{
|
||||
color: "var(--color-text-readable, var(--color-text))",
|
||||
background:
|
||||
l.code === locale ? "color-mix(in srgb, var(--color-primary) 10%, transparent)" : "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
width: "calc(100% - 8px)",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor =
|
||||
"color-mix(in srgb, var(--color-primary) 10%, transparent)";
|
||||
e.currentTarget.style.color = "var(--color-primary)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor =
|
||||
l.code === locale
|
||||
? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
|
||||
: "transparent";
|
||||
e.currentTarget.style.color = "var(--color-text)";
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={`/assets/images/icons/flags/${l.code}.png`}
|
||||
alt={l.lang}
|
||||
width={16}
|
||||
height={16}
|
||||
className="inline-block h-4 w-auto"
|
||||
/>
|
||||
{l.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
{open && (
|
||||
<div className="dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2">
|
||||
<div className="px-3 pb-1">
|
||||
<div className="flex items-center gap-1.5 rounded-md border bg-background px-2 py-1.5 text-sm">
|
||||
<Search className="h-3.5 w-3.5 text-muted-foreground" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="flex-1 bg-transparent outline-none text-sm"
|
||||
style={{ border: "none", padding: 0, margin: 0 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-h-[260px] overflow-y-auto">
|
||||
{filtered.length === 0 && (
|
||||
<p className="px-3 py-4 text-center text-xs text-muted-foreground">
|
||||
Geen talen gevonden
|
||||
</p>
|
||||
)}
|
||||
{filtered.map((l) => (
|
||||
<button
|
||||
key={l.code}
|
||||
type="button"
|
||||
onClick={() => switchLocale(l.code)}
|
||||
className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium transition-all duration-100 rounded-lg mx-1 ${
|
||||
l.code === locale
|
||||
? "opacity-100"
|
||||
: "opacity-70 hover:opacity-100"
|
||||
}`}
|
||||
style={{
|
||||
color: "var(--color-text-readable, var(--color-text))",
|
||||
background:
|
||||
l.code === locale
|
||||
? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
|
||||
: "none",
|
||||
border: "none",
|
||||
cursor: "pointer",
|
||||
width: "calc(100% - 8px)",
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.backgroundColor =
|
||||
"color-mix(in srgb, var(--color-primary) 10%, transparent)";
|
||||
e.currentTarget.style.color = "var(--color-primary)";
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.backgroundColor =
|
||||
l.code === locale
|
||||
? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
|
||||
: "transparent";
|
||||
e.currentTarget.style.color = "var(--color-text)";
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src={`/assets/images/icons/flags/${l.code}.png`}
|
||||
alt={l.lang}
|
||||
width={16}
|
||||
height={16}
|
||||
className="inline-block h-4 w-auto"
|
||||
/>
|
||||
{l.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user