fd5c0c9747
* applied eslint * add locales and lint the project * removed error boundary * updated locales * fix min files * fix locales
62 lines
1.7 KiB
TypeScript
62 lines
1.7 KiB
TypeScript
import { Button, Dropdown, MenuProps, Space, Typography } from 'antd';
|
|
import React, { useCallback, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CaretDownOutlined } from '@ant-design/icons';
|
|
import { Languages } from 'lucide-react';
|
|
import { Icon } from '../ui';
|
|
|
|
const langs = [
|
|
{ code: 'en', label: 'English' },
|
|
{ code: 'fr', label: 'Français' },
|
|
{ code: 'es', label: 'Español' },
|
|
{ code: 'ru', label: 'Русский' },
|
|
{ code: 'zh', label: '中國人' },
|
|
];
|
|
|
|
function LanguageSwitcher() {
|
|
const { i18n } = useTranslation();
|
|
|
|
const handleChangeLanguage = useCallback((lang: string) => {
|
|
i18n.changeLanguage(lang);
|
|
localStorage.setItem('i18nextLng', lang);
|
|
}, []);
|
|
|
|
const menuItems: MenuProps['items'] = langs.map((lang) => ({
|
|
key: lang.code,
|
|
label: (
|
|
<div key={lang.code} className="!py-1 flex items-center gap-2">
|
|
<Typography className="capitalize">{lang.label}</Typography>
|
|
</div>
|
|
),
|
|
}));
|
|
|
|
return (
|
|
<Dropdown
|
|
menu={{
|
|
items: menuItems,
|
|
selectable: true,
|
|
defaultSelectedKeys: [i18n.language],
|
|
style: {
|
|
maxHeight: 500,
|
|
overflowY: 'auto',
|
|
},
|
|
onClick: (e) => handleChangeLanguage(e.key),
|
|
}}
|
|
placement="bottomLeft"
|
|
>
|
|
<Button>
|
|
<Space>
|
|
<Typography className="font-medium capitalize">
|
|
<div className="flex items-center gap-2">
|
|
<Languages size={12} />
|
|
{i18n.language}
|
|
</div>
|
|
</Typography>
|
|
<CaretDownOutlined rev={undefined} />
|
|
</Space>
|
|
</Button>
|
|
</Dropdown>
|
|
);
|
|
}
|
|
|
|
export default LanguageSwitcher;
|