67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { Language } from '@mui/icons-material';
|
|
import { IconButton, Popover } from '@mui/material';
|
|
import { useRouter } from 'next/router';
|
|
import { useTranslation } from 'next-i18next';
|
|
import { MouseEvent, useState } from 'react';
|
|
|
|
import { languages } from '@/config/languages';
|
|
|
|
import styles from './LanguageSwitcher.module.scss';
|
|
|
|
const LanguageSwitcher = () => {
|
|
const router = useRouter();
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
|
|
|
|
const handleClick = (event: MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget);
|
|
|
|
const handleClose = () => setAnchorEl(null);
|
|
|
|
const handleChangeLanguage = (locale: string) => {
|
|
const { pathname, asPath, query } = router;
|
|
|
|
document.cookie = `NEXT_LOCALE=${locale}; path=/; expires=2147483647`;
|
|
router.push({ pathname, query }, asPath, { locale });
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<IconButton onClick={handleClick}>
|
|
<Language />
|
|
</IconButton>
|
|
|
|
<Popover
|
|
anchorEl={anchorEl}
|
|
open={Boolean(anchorEl)}
|
|
onClose={handleClose}
|
|
anchorOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
transformOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'right',
|
|
}}
|
|
>
|
|
<div className={styles.popover}>
|
|
<div className={styles.container}>
|
|
{languages.map(({ code, name, localName }) => (
|
|
<p key={code} className={styles.language} onClick={() => handleChangeLanguage(code)}>
|
|
{name} {localName && `(${localName})`}
|
|
</p>
|
|
))}
|
|
|
|
<a href="https://translate.rxresu.me" target="_blank" rel="noreferrer" className={styles.language}>
|
|
{t('common.footer.language.missing')}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</Popover>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default LanguageSwitcher;
|