File size: 3,240 Bytes
6111b2b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | "use client";
import { useState, useRef, useEffect } from "react";
import { useRouter } from "next/navigation";
import { LANGUAGES, LOCALE_COOKIE } from "@/i18n/config";
import type { Locale } from "@/i18n/config";
import { useLocale } from "next-intl";
/** Persist locale preference in cookie + localStorage (outside component scope for ESLint) */
function persistLocale(code: Locale) {
document.cookie = `${LOCALE_COOKIE}=${code};path=/;max-age=${365 * 24 * 60 * 60};samesite=lax`;
try {
localStorage.setItem(LOCALE_COOKIE, code);
} catch {
// Ignore
}
}
export default function LanguageSelector() {
const locale = useLocale();
const router = useRouter();
const [open, setOpen] = useState(false);
const ref = useRef<HTMLDivElement>(null);
const currentLang = LANGUAGES.find((l) => l.code === locale) || LANGUAGES[0];
// Close dropdown on outside click
useEffect(() => {
const handler = (e: MouseEvent) => {
if (ref.current && !ref.current.contains(e.target as Node)) {
setOpen(false);
}
};
document.addEventListener("mousedown", handler);
return () => document.removeEventListener("mousedown", handler);
}, []);
const handleSelect = (code: Locale) => {
if (code === locale) {
setOpen(false);
return;
}
persistLocale(code);
setOpen(false);
router.refresh();
};
return (
<div ref={ref} className="relative">
{/* Trigger button */}
<button
onClick={() => setOpen(!open)}
className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-sm font-medium text-text-main hover:bg-surface-hover transition-all border border-transparent hover:border-border"
title={currentLang.name}
>
<span className="text-base leading-none">{currentLang.flag}</span>
<span className="text-xs font-semibold tracking-wide">{currentLang.label}</span>
<span
className={`material-symbols-outlined text-[14px] text-text-muted transition-transform ${open ? "rotate-180" : ""}`}
>
expand_more
</span>
</button>
{/* Dropdown */}
{open && (
<div className="absolute right-0 top-full mt-1 w-56 max-h-80 rounded-xl border border-border bg-bg shadow-xl z-50 overflow-y-auto animate-in fade-in slide-in-from-top-1 duration-150">
{LANGUAGES.map((lang) => (
<button
key={lang.code}
onClick={() => handleSelect(lang.code)}
className={`w-full flex items-center gap-2.5 px-3 py-2.5 text-sm transition-colors ${
lang.code === locale
? "bg-primary/10 text-primary font-semibold"
: "text-text-main hover:bg-surface-hover"
}`}
>
<span className="text-base leading-none">{lang.flag}</span>
<span className="flex-1 text-left">{lang.name}</span>
{lang.code === locale && (
<span className="material-symbols-outlined text-[16px] text-primary">check</span>
)}
</button>
))}
</div>
)}
</div>
);
}
|