Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(lang): add language switcher on the landing page, in the footer
- Loading branch information
1 parent
036adbf
commit 8bc7d25
Showing
8 changed files
with
106 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
.popover { | ||
width: 460px; | ||
|
||
@apply px-4 py-2; | ||
} | ||
|
||
.container { | ||
@apply grid grid-cols-3 items-center justify-center gap-x-2; | ||
} | ||
|
||
.language { | ||
@apply py-2 px-4 cursor-pointer text-center hover:underline; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import { Language } from '@mui/icons-material'; | ||
import { IconButton, Popover } from '@mui/material'; | ||
import dayjs from 'dayjs'; | ||
import { useRouter } from 'next/router'; | ||
import { MouseEvent, useState } from 'react'; | ||
|
||
import { languages } from '@/config/languages'; | ||
import { setLanguage } from '@/store/build/buildSlice'; | ||
import { useAppDispatch } from '@/store/hooks'; | ||
|
||
import styles from './LanguageSwitcher.module.scss'; | ||
|
||
const LanguageSwitcher = () => { | ||
const router = useRouter(); | ||
|
||
const dispatch = useAppDispatch(); | ||
|
||
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; | ||
|
||
dayjs.locale(locale); | ||
dispatch(setLanguage({ language: locale })); | ||
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}> | ||
Missing your language? | ||
</a> | ||
</div> | ||
</div> | ||
</Popover> | ||
</div> | ||
); | ||
}; | ||
|
||
export default LanguageSwitcher; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters