Files
wtr/components/ui/language-toggle.tsx

24 lines
970 B
TypeScript

"use client";
import { Languages } from "lucide-react";
import { useI18n, type Language } from "@/lib/i18n";
export function LanguageToggle() {
const { language, setLanguage, t } = useI18n();
return (
<label className="relative flex items-center">
<span className="sr-only">{t("language.label")}</span>
<Languages className="pointer-events-none absolute left-3 size-4 text-muted" />
<select
aria-label={t("language.label")}
value={language}
onChange={(event) => setLanguage(event.target.value as Language)}
className="surface-control h-10 appearance-none rounded-control py-2 pl-9 pr-3 text-xs font-semibold uppercase text-foreground transition hover:bg-surface-raised/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
>
<option value="pl">{t("language.polish")}</option>
<option value="en">{t("language.english")}</option>
</select>
</label>
);
}