gitscope
/
← marzneshin / app/dashboard/src/components/language/index.tsx / blame
Files Commits 446 Branches 1 Tags 43 Markers 4 README License
https://dev.kronoz.win/r/marzneshin.git
app/dashboard/src/components/language/index.tsx · v0.1.4
Source
1 a47eb4c Dawsh 2y ago import {
2 a47eb4c Dawsh 2y ago chakra,
3 a47eb4c Dawsh 2y ago IconButton,
4 a47eb4c Dawsh 2y ago Menu,
5 a47eb4c Dawsh 2y ago MenuButton,
6 a47eb4c Dawsh 2y ago MenuItem,
7 a47eb4c Dawsh 2y ago MenuList,
8 bf7c131 Mardin 2y ago } from '@chakra-ui/react';
9 bf7c131 Mardin 2y ago import { LanguageIcon } from '@heroicons/react/24/outline';
10 bf7c131 Mardin 2y ago import { FC, ReactNode } from 'react';
11 bf7c131 Mardin 2y ago import { useTranslation } from 'react-i18next';
12 a47eb4c Dawsh 2y ago
13 a47eb4c Dawsh 2y ago type HeaderProps = {
14 a47eb4c Dawsh 2y ago actions?: ReactNode;
15 a47eb4c Dawsh 2y ago };
16 a47eb4c Dawsh 2y ago
17 a47eb4c Dawsh 2y ago const LangIcon = chakra(LanguageIcon, {
18 a47eb4c Dawsh 2y ago baseStyle: {
19 a47eb4c Dawsh 2y ago w: 4,
20 a47eb4c Dawsh 2y ago h: 4,
21 a47eb4c Dawsh 2y ago },
22 a47eb4c Dawsh 2y ago });
23 a47eb4c Dawsh 2y ago
24 bf7c131 Mardin 2y ago export const Language: FC<HeaderProps> = () => {
25 a47eb4c Dawsh 2y ago const { i18n } = useTranslation();
26 a47eb4c Dawsh 2y ago
27 a47eb4c Dawsh 2y ago var changeLanguage = (lang: string) => {
28 a47eb4c Dawsh 2y ago i18n.changeLanguage(lang);
29 a47eb4c Dawsh 2y ago };
30 a47eb4c Dawsh 2y ago
31 a47eb4c Dawsh 2y ago return (
32 a47eb4c Dawsh 2y ago <Menu placement="bottom-end">
33 a47eb4c Dawsh 2y ago <MenuButton
34 a47eb4c Dawsh 2y ago as={IconButton}
35 a47eb4c Dawsh 2y ago size="sm"
36 a47eb4c Dawsh 2y ago variant="outline"
37 a47eb4c Dawsh 2y ago icon={<LangIcon />}
38 a47eb4c Dawsh 2y ago position="relative"
39 a47eb4c Dawsh 2y ago />
40 a47eb4c Dawsh 2y ago <MenuList minW="100px" zIndex={9999}>
41 a47eb4c Dawsh 2y ago <MenuItem
42 a47eb4c Dawsh 2y ago maxW="100px"
43 a47eb4c Dawsh 2y ago fontSize="sm"
44 bf7c131 Mardin 2y ago onClick={() => changeLanguage('en')}
45 a47eb4c Dawsh 2y ago >
46 a47eb4c Dawsh 2y ago English
47 a47eb4c Dawsh 2y ago </MenuItem>
48 a47eb4c Dawsh 2y ago <MenuItem
49 a47eb4c Dawsh 2y ago maxW="100px"
50 a47eb4c Dawsh 2y ago fontSize="sm"
51 bf7c131 Mardin 2y ago onClick={() => changeLanguage('fa')}
52 a47eb4c Dawsh 2y ago >
53 a47eb4c Dawsh 2y ago فارسی
54 a47eb4c Dawsh 2y ago </MenuItem>
55 a47eb4c Dawsh 2y ago <MenuItem
56 a47eb4c Dawsh 2y ago maxW="100px"
57 a47eb4c Dawsh 2y ago fontSize="sm"
58 bf7c131 Mardin 2y ago onClick={() => changeLanguage('zh-cn')}
59 a47eb4c Dawsh 2y ago >
60 a47eb4c Dawsh 2y ago 简体中文
61 a47eb4c Dawsh 2y ago </MenuItem>
62 a47eb4c Dawsh 2y ago <MenuItem
63 a47eb4c Dawsh 2y ago maxW="100px"
64 a47eb4c Dawsh 2y ago fontSize="sm"
65 bf7c131 Mardin 2y ago onClick={() => changeLanguage('ru')}
66 a47eb4c Dawsh 2y ago >
67 a47eb4c Dawsh 2y ago Русский
68 a47eb4c Dawsh 2y ago </MenuItem>
69 a47eb4c Dawsh 2y ago </MenuList>
70 a47eb4c Dawsh 2y ago </Menu>
71 a47eb4c Dawsh 2y ago );
72 a47eb4c Dawsh 2y ago };