52 lines
1.6 KiB
TypeScript
Executable File
52 lines
1.6 KiB
TypeScript
Executable File
import {useValueLists} from '../http/value-lists';
|
|
import {Button} from '../ui/buttons/button';
|
|
import {LanguageIcon} from '../icons/material/Language';
|
|
import {KeyboardArrowDownIcon} from '../icons/material/KeyboardArrowDown';
|
|
import {useSelectedLocale} from './selected-locale';
|
|
import {Menu, MenuItem, MenuTrigger} from '../ui/navigation/menu/menu-trigger';
|
|
import {useChangeLocale} from './change-locale';
|
|
import {useSettings} from '../core/settings/use-settings';
|
|
|
|
export function LocaleSwitcher() {
|
|
const {locale} = useSelectedLocale();
|
|
const changeLocale = useChangeLocale();
|
|
const {data} = useValueLists(['localizations']);
|
|
const {i18n} = useSettings();
|
|
|
|
if (!data?.localizations || !locale || !i18n.enable) return null;
|
|
|
|
return (
|
|
<MenuTrigger
|
|
floatingWidth="matchTrigger"
|
|
selectionMode="single"
|
|
selectedValue={locale.language}
|
|
onSelectionChange={value => {
|
|
const newLocale = value as string;
|
|
if (newLocale !== locale?.language) {
|
|
changeLocale.mutate({locale: newLocale});
|
|
}
|
|
}}
|
|
>
|
|
<Button
|
|
disabled={changeLocale.isPending}
|
|
className="capitalize"
|
|
startIcon={<LanguageIcon />}
|
|
endIcon={<KeyboardArrowDownIcon />}
|
|
>
|
|
{locale.name}
|
|
</Button>
|
|
<Menu>
|
|
{data.localizations.map(localization => (
|
|
<MenuItem
|
|
value={localization.language}
|
|
key={localization.language}
|
|
className="capitalize"
|
|
>
|
|
{localization.name}
|
|
</MenuItem>
|
|
))}
|
|
</Menu>
|
|
</MenuTrigger>
|
|
);
|
|
}
|