40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useLocale } from "~/components/locale-provider";
|
|
import type { Locale } from "~/lib/i18n";
|
|
|
|
const OPTIONS: { value: Locale; label: string }[] = [
|
|
{ value: "zh", label: "中文" },
|
|
{ value: "en", label: "English" },
|
|
];
|
|
|
|
export function LanguageSwitcher({ className = "" }: { className?: string }) {
|
|
const { locale, setLocale, t } = useLocale();
|
|
|
|
return (
|
|
<label
|
|
className={`inline-flex items-center gap-2 text-xs text-neutral-500 ${className}`}
|
|
>
|
|
<span className="sr-only">{t.languageLabel}</span>
|
|
<select
|
|
value={locale}
|
|
onChange={(event) => setLocale(event.target.value as Locale)}
|
|
aria-label={t.languageLabel}
|
|
className="appearance-none rounded-lg border border-neutral-200 bg-white px-2.5 py-1.5 pr-7 text-xs font-medium text-neutral-700 shadow-sm outline-none transition hover:border-neutral-300 focus:border-neutral-400"
|
|
style={{
|
|
backgroundImage:
|
|
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a3a3a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E\")",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: "right 0.55rem center",
|
|
}}
|
|
>
|
|
{OPTIONS.map((option) => (
|
|
<option key={option.value} value={option.value}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
);
|
|
}
|