34 lines
998 B
TypeScript
34 lines
998 B
TypeScript
import { useTranslation } from "react-i18next";
|
|
import {
|
|
persistLanguage,
|
|
SUPPORTED_LANGUAGES,
|
|
type SupportedLanguage,
|
|
} from "../i18n/config";
|
|
|
|
export function LanguageSwitcher({ compact = false }: { compact?: boolean }) {
|
|
const { t, i18n } = useTranslation("common");
|
|
const current = (i18n.language as SupportedLanguage) || "nl-BE";
|
|
|
|
function handleChange(next: SupportedLanguage) {
|
|
void i18n.changeLanguage(next);
|
|
persistLanguage(next);
|
|
}
|
|
|
|
return (
|
|
<label className={`language-switcher ${compact ? "language-switcher-compact" : ""}`}>
|
|
<span className="visually-hidden">{t("language.label")}</span>
|
|
<select
|
|
value={current}
|
|
onChange={(event) => handleChange(event.target.value as SupportedLanguage)}
|
|
aria-label={t("language.label")}
|
|
>
|
|
{SUPPORTED_LANGUAGES.map((lang) => (
|
|
<option key={lang} value={lang}>
|
|
{t(`language.${lang}`)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
);
|
|
}
|