49 lines
1.3 KiB
TypeScript
49 lines
1.3 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Menu, MenuButton, MenuItem, MenuList, MenuButtonProps } from '@chakra-ui/react';
|
|
import { getLangStore, LangEnum, setLangStore, langMap } from '@/utils/i18n';
|
|
import MyIcon from '@/components/Icon';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { useRouter } from 'next/router';
|
|
|
|
const Language = (props: MenuButtonProps) => {
|
|
const router = useRouter();
|
|
const { i18n } = useTranslation();
|
|
|
|
const [language, setLanguage] = useState<`${LangEnum}`>(getLangStore());
|
|
|
|
return (
|
|
<Menu autoSelect={false}>
|
|
<MenuButton
|
|
{...props}
|
|
sx={{
|
|
'& span': {
|
|
flex: 0
|
|
}
|
|
}}
|
|
>
|
|
<MyIcon name={langMap[language].icon as any} w={['18px', '22px']} />
|
|
</MenuButton>
|
|
<MenuList w="max-content" minW="120px">
|
|
{Object.entries(langMap).map(([key, lang]) => (
|
|
<MenuItem
|
|
key={key}
|
|
display="flex"
|
|
alignItems="center"
|
|
onClick={() => {
|
|
const lang = key as `${LangEnum}`;
|
|
setLangStore(lang);
|
|
setLanguage(lang);
|
|
i18n?.changeLanguage?.(lang);
|
|
router.reload();
|
|
}}
|
|
>
|
|
{lang.label}
|
|
</MenuItem>
|
|
))}
|
|
</MenuList>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
export default React.memo(Language);
|