56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import { Languages } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuCheck,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuLabel,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import {
|
|
changeLanguage,
|
|
LANGUAGE_LABELS,
|
|
SUPPORTED_LANGUAGES,
|
|
type SupportedLanguage,
|
|
} from '@/i18n/config';
|
|
|
|
/** Language selector for the topbar; lazy-loads the chosen locale (Q4-B). */
|
|
export function LanguageSwitcher() {
|
|
const { t, i18n } = useTranslation();
|
|
const current = (i18n.resolvedLanguage ?? 'en') as SupportedLanguage;
|
|
|
|
return (
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
aria-label={t('userMenu.language')}
|
|
data-testid="language-switcher-button"
|
|
>
|
|
<Languages />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuLabel>{t('userMenu.language')}</DropdownMenuLabel>
|
|
<DropdownMenuSeparator />
|
|
{SUPPORTED_LANGUAGES.map((lng) => (
|
|
<DropdownMenuItem
|
|
key={lng}
|
|
onSelect={() => {
|
|
void changeLanguage(lng);
|
|
}}
|
|
data-testid={`language-option-${lng}`}
|
|
>
|
|
{LANGUAGE_LABELS[lng]}
|
|
<DropdownMenuCheck checked={current === lng} />
|
|
</DropdownMenuItem>
|
|
))}
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
}
|