remember language preference
This commit is contained in:
parent
c6abeeb8aa
commit
37ce14f16c
3 changed files with 41 additions and 2 deletions
|
@ -4,6 +4,7 @@ import { Menu, Transition } from '@headlessui/react'
|
||||||
|
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
import { useCookies, withCookies } from 'react-cookie'
|
||||||
|
|
||||||
// https://headlessui.dev/react/menu#integrating-with-next-js
|
// https://headlessui.dev/react/menu#integrating-with-next-js
|
||||||
const CustomLink = ({ href, children, as, locale, ...props }): JSX.Element => {
|
const CustomLink = ({ href, children, as, locale, ...props }): JSX.Element => {
|
||||||
|
@ -28,6 +29,8 @@ const localeText = (locale: string): string => {
|
||||||
const SwitchLang = () => {
|
const SwitchLang = () => {
|
||||||
const { locales, pathname, query, asPath } = useRouter()
|
const { locales, pathname, query, asPath } = useRouter()
|
||||||
|
|
||||||
|
const [_, setCookie] = useCookies(['NEXT_LOCALE'])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Menu>
|
<Menu>
|
||||||
|
@ -48,7 +51,13 @@ const SwitchLang = () => {
|
||||||
<Menu.Items className="absolute top-0 right-0 z-20 mt-8 w-28 divide-y divide-gray-900 overflow-auto rounded border border-gray-900/10 bg-white py-1 shadow-lg focus:outline-none dark:border-gray-500/30 dark:bg-gray-900 dark:text-white">
|
<Menu.Items className="absolute top-0 right-0 z-20 mt-8 w-28 divide-y divide-gray-900 overflow-auto rounded border border-gray-900/10 bg-white py-1 shadow-lg focus:outline-none dark:border-gray-500/30 dark:bg-gray-900 dark:text-white">
|
||||||
{locales!.map(locale => (
|
{locales!.map(locale => (
|
||||||
<Menu.Item key={locale}>
|
<Menu.Item key={locale}>
|
||||||
<CustomLink key={locale} href={{ pathname, query }} as={asPath} locale={locale}>
|
<CustomLink
|
||||||
|
key={locale}
|
||||||
|
href={{ pathname, query }}
|
||||||
|
as={asPath}
|
||||||
|
locale={locale}
|
||||||
|
onClick={() => setCookie('NEXT_LOCALE', locale, { path: '/' })}
|
||||||
|
>
|
||||||
<div className="m-1 cursor-pointer rounded px-2 py-1 text-left text-sm font-medium hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-600/10 dark:hover:text-blue-400">
|
<div className="m-1 cursor-pointer rounded px-2 py-1 text-left text-sm font-medium hover:bg-blue-50 hover:text-blue-700 dark:hover:bg-blue-600/10 dark:hover:text-blue-400">
|
||||||
{localeText(locale)}
|
{localeText(locale)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -62,4 +71,4 @@ const SwitchLang = () => {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SwitchLang
|
export default withCookies(SwitchLang)
|
||||||
|
|
|
@ -35,6 +35,7 @@
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
"react-async-hook": "^4.0.0",
|
"react-async-hook": "^4.0.0",
|
||||||
"react-audio-player": "^0.17.0",
|
"react-audio-player": "^0.17.0",
|
||||||
|
"react-cookie": "^4.1.1",
|
||||||
"react-copy-to-clipboard": "^5.0.3",
|
"react-copy-to-clipboard": "^5.0.3",
|
||||||
"react-dom": "^17.0.2",
|
"react-dom": "^17.0.2",
|
||||||
"react-dplayer": "^0.4.2",
|
"react-dplayer": "^0.4.2",
|
||||||
|
|
|
@ -42,6 +42,7 @@ specifiers:
|
||||||
react: ^17.0.2
|
react: ^17.0.2
|
||||||
react-async-hook: ^4.0.0
|
react-async-hook: ^4.0.0
|
||||||
react-audio-player: ^0.17.0
|
react-audio-player: ^0.17.0
|
||||||
|
react-cookie: ^4.1.1
|
||||||
react-copy-to-clipboard: ^5.0.3
|
react-copy-to-clipboard: ^5.0.3
|
||||||
react-dom: ^17.0.2
|
react-dom: ^17.0.2
|
||||||
react-dplayer: ^0.4.2
|
react-dplayer: ^0.4.2
|
||||||
|
@ -86,6 +87,7 @@ dependencies:
|
||||||
react: 17.0.2
|
react: 17.0.2
|
||||||
react-async-hook: 4.0.0_react@17.0.2
|
react-async-hook: 4.0.0_react@17.0.2
|
||||||
react-audio-player: 0.17.0_react-dom@17.0.2+react@17.0.2
|
react-audio-player: 0.17.0_react-dom@17.0.2+react@17.0.2
|
||||||
|
react-cookie: 4.1.1_react@17.0.2
|
||||||
react-copy-to-clipboard: 5.0.4_react@17.0.2
|
react-copy-to-clipboard: 5.0.4_react@17.0.2
|
||||||
react-dom: 17.0.2_react@17.0.2
|
react-dom: 17.0.2_react@17.0.2
|
||||||
react-dplayer: 0.4.2_react@17.0.2
|
react-dplayer: 0.4.2_react@17.0.2
|
||||||
|
@ -395,6 +397,10 @@ packages:
|
||||||
tailwindcss: 3.0.18_833e1018ad0d7954aa80c53675939269
|
tailwindcss: 3.0.18_833e1018ad0d7954aa80c53675939269
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/@types/cookie/0.3.3:
|
||||||
|
resolution: {integrity: sha512-LKVP3cgXBT9RYj+t+9FDKwS5tdI+rPBXaNSkma7hvqy35lc7mAokC2zsqWJH0LaqIt3B962nuYI77hsJoT1gow==}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@types/cors/2.8.12:
|
/@types/cors/2.8.12:
|
||||||
resolution: {integrity: sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==}
|
resolution: {integrity: sha512-vt+kDhq/M2ayberEtJcIN/hxXy1Pk+59g2FV/ZQceeaTyCtCucjL2Q7FXlFjtWn4n15KCr1NE2lNNFhp0lEThw==}
|
||||||
dev: true
|
dev: true
|
||||||
|
@ -1068,6 +1074,11 @@ packages:
|
||||||
safe-buffer: 5.1.2
|
safe-buffer: 5.1.2
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/cookie/0.4.2:
|
||||||
|
resolution: {integrity: sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==}
|
||||||
|
engines: {node: '>= 0.6'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/copy-to-clipboard/3.3.1:
|
/copy-to-clipboard/3.3.1:
|
||||||
resolution: {integrity: sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==}
|
resolution: {integrity: sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==}
|
||||||
dependencies:
|
dependencies:
|
||||||
|
@ -3645,6 +3656,17 @@ packages:
|
||||||
react-dom: 17.0.2_react@17.0.2
|
react-dom: 17.0.2_react@17.0.2
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/react-cookie/4.1.1_react@17.0.2:
|
||||||
|
resolution: {integrity: sha512-ffn7Y7G4bXiFbnE+dKhHhbP+b8I34mH9jqnm8Llhj89zF4nPxPutxHT1suUqMeCEhLDBI7InYwf1tpaSoK5w8A==}
|
||||||
|
peerDependencies:
|
||||||
|
react: '>= 16.3.0'
|
||||||
|
dependencies:
|
||||||
|
'@types/hoist-non-react-statics': 3.3.1
|
||||||
|
hoist-non-react-statics: 3.3.2
|
||||||
|
react: 17.0.2
|
||||||
|
universal-cookie: 4.0.4
|
||||||
|
dev: false
|
||||||
|
|
||||||
/react-copy-to-clipboard/5.0.4_react@17.0.2:
|
/react-copy-to-clipboard/5.0.4_react@17.0.2:
|
||||||
resolution: {integrity: sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==}
|
resolution: {integrity: sha512-IeVAiNVKjSPeGax/Gmkqfa/+PuMTBhutEvFUaMQLwE2tS0EXrAdgOpWDX26bWTXF3HrioorR7lr08NqeYUWQCQ==}
|
||||||
peerDependencies:
|
peerDependencies:
|
||||||
|
@ -4473,6 +4495,13 @@ packages:
|
||||||
unist-util-visit-parents: 5.1.0
|
unist-util-visit-parents: 5.1.0
|
||||||
dev: false
|
dev: false
|
||||||
|
|
||||||
|
/universal-cookie/4.0.4:
|
||||||
|
resolution: {integrity: sha512-lbRVHoOMtItjWbM7TwDLdl8wug7izB0tq3/YVKhT/ahB4VDvWMyvnADfnJI8y6fSvsjh51Ix7lTGC6Tn4rMPhw==}
|
||||||
|
dependencies:
|
||||||
|
'@types/cookie': 0.3.3
|
||||||
|
cookie: 0.4.2
|
||||||
|
dev: false
|
||||||
|
|
||||||
/universalify/0.1.2:
|
/universalify/0.1.2:
|
||||||
resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
|
resolution: {integrity: sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==}
|
||||||
engines: {node: '>= 4.0.0'}
|
engines: {node: '>= 4.0.0'}
|
||||||
|
|
Loading…
Reference in a new issue