Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 1x 5x 5x 5x 5x 1x 5x 18x 12x 15x | import Select, { type SelectChangeEvent } from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import { useLanguageStore } from '../../stores/useLanguageStore';
import { useTranslation } from 'react-i18next';
import FlagIcon, { type CountryCode } from '../FlagIcon';
const languages: Array<{
lang: string;
country: CountryCode;
label: string;
}> = [
{ lang: "fr", country: "FR", label: "Français" },
{ lang: "en", country: "US", label: "English" },
{ lang: "de", country: "DE", label: "Deutsch" },
];
function LanguageSwitcher() {
const { t } = useTranslation();
const lang = useLanguageStore(state => state.lang);
const setLang = useLanguageStore(state => state.setLang);
const handleChange = (e: SelectChangeEvent<string>) => {
setLang(e.target.value as typeof lang);
};
return (
<Select
value={lang}
onChange={handleChange}
size="small"
aria-label={t('navbar.language')}
renderValue={value => {
const cfg = languages.find(l => l.lang === value);
return cfg ? <FlagIcon code={cfg.country} /> : null;
}}
sx={{ minWidth: 60 }}
>
{languages.map(({ lang, country, label }) => (
<MenuItem key={lang} value={lang}>
<FlagIcon code={country} style={{ marginRight: 8 }} />
{label}
</MenuItem>
))}
</Select>
);
}
export default LanguageSwitcher;
|