45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import {
|
|
Icon,
|
|
IconButton,
|
|
Menu,
|
|
MenuButton,
|
|
MenuItem,
|
|
MenuItemOption,
|
|
MenuList,
|
|
MenuOptionGroup
|
|
} from '@chakra-ui/react';
|
|
|
|
import { IoLanguage } from 'react-icons/io5';
|
|
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
const LanguageSwitch: React.FC = () => {
|
|
const { t, i18n } = useTranslation();
|
|
|
|
return (
|
|
<Menu>
|
|
<MenuButton
|
|
as={IconButton}
|
|
aria-label={t('nav.toggle_language') ?? ''}
|
|
title={t('nav.toggle_language') ?? ''}
|
|
icon={<Icon as={IoLanguage} boxSize={5} />}
|
|
variant="ghost"
|
|
/>
|
|
<MenuList>
|
|
<MenuOptionGroup
|
|
defaultValue={i18n.language}
|
|
type="radio"
|
|
onChange={(value) => i18n.changeLanguage(value as string)}
|
|
>
|
|
<MenuItemOption value="en">English</MenuItemOption>
|
|
{/* <MenuItemOption value="zh-CN">简体中文</MenuItemOption>
|
|
<MenuItemOption value="fr">French</MenuItemOption> */}
|
|
<MenuItemOption value="it">Italian</MenuItemOption>
|
|
</MenuOptionGroup>
|
|
</MenuList>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default LanguageSwitch;
|