41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
"use client";
|
||
import { useTransition } from "react";
|
||
import { useRouter } from "next/navigation";
|
||
import { Globe2 } from "lucide-react";
|
||
import { languageCookie, type LanguagePreference } from "@/shared/i18n";
|
||
import { useI18n } from "./I18nProvider";
|
||
|
||
export function LanguageSwitcher() {
|
||
const { t, preference, detectedLocale } = useI18n();
|
||
const [pending, startTransition] = useTransition();
|
||
const router = useRouter();
|
||
function changeLanguage(value: LanguagePreference) {
|
||
document.cookie = `${languageCookie}=${value}; Path=/; Max-Age=31536000; SameSite=Lax${location.protocol === "https:" ? "; Secure" : ""}`;
|
||
startTransition(() => router.refresh());
|
||
}
|
||
return (
|
||
<label className="language-switcher" aria-busy={pending}>
|
||
<Globe2 size={16} aria-hidden="true" />
|
||
<span className="sr-only">{t("Site language")}</span>
|
||
<select
|
||
aria-label={t("Site language")}
|
||
value={preference}
|
||
disabled={pending}
|
||
onChange={(event) =>
|
||
changeLanguage(event.target.value as LanguagePreference)
|
||
}
|
||
>
|
||
<option value="auto">
|
||
{t("Automatic")} · {detectedLocale === "ru" ? "RU" : "EN"}
|
||
</option>
|
||
<option value="en" lang="en">
|
||
English
|
||
</option>
|
||
<option value="ru" lang="ru">
|
||
Русский
|
||
</option>
|
||
</select>
|
||
</label>
|
||
);
|
||
}
|