Add search to language switcher dropdown, remove translation script
Local Build and Deploy / deploy (push) Successful in 1m6s
Local Build and Deploy / deploy (push) Successful in 1m6s
This commit is contained in:
openhands committed
1 parent
72a3284ddd
commit
187e008914
2 files changed
+73
-150
No files matched your search
@@ -3,7 +3,8 @@
|
||||
import Image from "next/image";
|
||||
import { useLocale } from "next-intl";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTransition, useState, useRef, useEffect } from "react";
|
||||
import { useTransition, useState, useRef, useEffect, useMemo } from "react";
|
||||
import { Search } from "lucide-react";
|
||||
|
||||
const LOCALES: { code: string; label: string; lang: string }[] = [
|
||||
{ code: "nl", label: "Nederlands", lang: "nl" },
|
||||
@@ -35,9 +36,21 @@ export function LanguageSwitcher() {
|
||||
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]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClick(e: MouseEvent) {
|
||||
if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
|
||||
@@ -46,6 +59,10 @@ export function LanguageSwitcher() {
|
||||
return () => document.removeEventListener("mousedown", handleClick);
|
||||
}, []);
|
||||
|
||||
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`;
|
||||
@@ -76,42 +93,62 @@ export function LanguageSwitcher() {
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[160px] max-h-[300px] overflow-y-auto rounded-xl z-50 py-2">
|
||||
{LOCALES.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: "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 = "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"
|
||||
<div className="dropdown-menu absolute right-0 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="Zoeken..."
|
||||
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
|
||||
/>
|
||||
{l.label}
|
||||
</button>
|
||||
))}
|
||||
</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