Renaming to common

components/common/I18nWidget/I18nWidget.module.css

@@ -0,0 +1,28 @@
+.root {
+  @apply relative;
+}
+
+.button {
+  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center justify-center;
+}
+
+.button:focus {
+  @apply outline-none;
+}
+
+.dropdownMenu {
+  @apply fixed right-0 top-12 mt-2 origin-top-right outline-none bg-primary z-40 w-full h-full;
+
+  @screen lg {
+    @apply absolute border border-accents-1 shadow-lg w-56 h-auto;
+  }
+}
+
+.item {
+  @apply flex cursor-pointer px-6 py-3 flex transition ease-in-out duration-150 text-primary leading-6 font-medium items-center;
+  text-transform: capitalize;
+}
+
+.item:hover {
+  @apply bg-accents-1;
+}

components/common/I18nWidget/I18nWidget.tsx

@@ -0,0 +1,82 @@
+import { FC } from 'react'
+import cn from 'classnames'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import { Menu } from '@headlessui/react'
+import { DoubleChevron } from '@components/icons'
+import s from './I18nWidget.module.css'
+
+interface LOCALE_DATA {
+  name: string
+  img: {
+    filename: string
+    alt: string
+  }
+}
+
+const LOCALES_MAP: Record<string, LOCALE_DATA> = {
+  es: {
+    name: 'Español',
+    img: {
+      filename: 'flag-es-co.svg',
+      alt: 'Bandera Colombiana',
+    },
+  },
+  'en-US': {
+    name: 'English',
+    img: {
+      filename: 'flag-en-us.svg',
+      alt: 'US Flag',
+    },
+  },
+}
+
+const I18nWidget: FC = () => {
+  const {
+    locale,
+    locales,
+    defaultLocale = 'en-US',
+    asPath: currentPath,
+  } = useRouter()
+  const options = locales?.filter((val) => val !== locale)
+
+  const currentLocale = locale || defaultLocale
+
+  return (
+    <nav className={s.root}>
+      <Menu>
+        <Menu.Button className={s.button} aria-label="Language selector">
+          <img
+            className="block mr-2 w-5"
+            src={`/${LOCALES_MAP[currentLocale].img.filename}`}
+            alt={LOCALES_MAP[currentLocale].img.alt}
+          />
+          <span className="mr-2">{LOCALES_MAP[currentLocale].name}</span>
+          {options && (
+            <span>
+              <DoubleChevron />
+            </span>
+          )}
+        </Menu.Button>
+
+        {options?.length ? (
+          <Menu.Items className={s.dropdownMenu}>
+            {options.map((locale) => (
+              <Menu.Item key={locale}>
+                {({ active }) => (
+                  <Link href={currentPath} locale={locale}>
+                    <a className={cn(s.item, { [s.active]: active })}>
+                      {LOCALES_MAP[locale].name}
+                    </a>
+                  </Link>
+                )}
+              </Menu.Item>
+            ))}
+          </Menu.Items>
+        ) : null}
+      </Menu>
+    </nav>
+  )
+}
+
+export default I18nWidget

components/common/I18nWidget/index.ts

@@ -0,0 +1 @@
+export { default } from './I18nWidget'