4
0
forked from crowetic/commerce

Locale switcher

This commit is contained in:
Luis Alvarez 2020-10-25 17:16:05 -05:00
parent 3654cb47d5
commit 42ceab42e8

View File

@ -1,35 +1,48 @@
import { FC } from 'react' import { FC } from 'react'
import s from './I18nWidget.module.css' import cn from 'classnames'
import { useRouter } from 'next/router'
import Link from 'next/link'
import { Menu } from '@headlessui/react' import { Menu } from '@headlessui/react'
import { DoubleChevron } from '@components/icon' import { DoubleChevron } from '@components/icon'
import cn from 'classnames' import s from './I18nWidget.module.css'
const LOCALES_MAP: Record<string, string> = {
es: 'Español',
'en-US': 'English',
}
const I18nWidget: FC = () => { const I18nWidget: FC = () => {
const { locale, locales, defaultLocale = 'en-US' } = useRouter()
const options = locales?.filter((val) => val !== locale)
return ( return (
<nav className={s.root}> <nav className={s.root}>
<Menu> <Menu>
<Menu.Button className={s.button} aria-label="Language selector"> <Menu.Button className={s.button} aria-label="Language selector">
<img className="" src="/flag-us.png" alt="US Flag" /> <img className="" src="/flag-us.png" alt="US Flag" />
<span>English</span> <span>{LOCALES_MAP[locale || defaultLocale]}</span>
<span className=""> {options && (
<DoubleChevron /> <span className="">
</span> <DoubleChevron />
</span>
)}
</Menu.Button> </Menu.Button>
<Menu.Items className={s.dropdownMenu}>
<Menu.Item> {options?.length ? (
{({ active }) => ( <Menu.Items className={s.dropdownMenu}>
<a {options.map((locale) => (
className={cn(s.item, { [s.active]: active })} <Menu.Item key={locale}>
href="#" {({ active }) => (
onClick={(e) => { <Link href="/" locale={locale}>
e.preventDefault() <a className={cn(s.item, { [s.active]: active })}>
}} {LOCALES_MAP[locale]}
> </a>
Español </Link>
</a> )}
)} </Menu.Item>
</Menu.Item> ))}
</Menu.Items> </Menu.Items>
) : null}
</Menu> </Menu>
</nav> </nav>
) )