Locale switcher

components/core/I18nWidget/I18nWidget.tsx

@@ -1,35 +1,48 @@
 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 { 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 { locale, locales, defaultLocale = 'en-US' } = useRouter()
+  const options = locales?.filter((val) => val !== locale)
+
   return (
     <nav className={s.root}>
       <Menu>
         <Menu.Button className={s.button} aria-label="Language selector">
           <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.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>
     </nav>
   )