46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import {
|
|
getLanguageName,
|
|
LOCALE_COOKIE,
|
|
locales,
|
|
type Locale,
|
|
} from "@/lib/i18n";
|
|
|
|
export default function LanguageSwitcher({
|
|
locale,
|
|
label,
|
|
onChange,
|
|
}: {
|
|
locale: Locale;
|
|
label: string;
|
|
onChange?: (locale: Locale) => void;
|
|
}) {
|
|
const router = useRouter();
|
|
|
|
function handleChange(value: Locale) {
|
|
document.cookie = `${LOCALE_COOKIE}=${value}; Path=/; Max-Age=31536000; SameSite=Lax`;
|
|
onChange?.(value);
|
|
router.refresh();
|
|
}
|
|
|
|
return (
|
|
<label className="flex h-10 items-center gap-2 text-sm">
|
|
<span className="sr-only">{label}</span>
|
|
<select
|
|
value={locale}
|
|
onChange={(event) => handleChange(event.target.value as Locale)}
|
|
className="h-10 rounded-lg border border-slate-300 bg-white px-3 text-slate-700 outline-none focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100"
|
|
aria-label={label}
|
|
>
|
|
{locales.map((option) => (
|
|
<option key={option} value={option}>
|
|
{getLanguageName(option)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
);
|
|
}
|