i18nWidget

components/core/Footer/Footer.tsx

@@ -1,11 +1,11 @@
 import { FC } from 'react'
 import cn from 'classnames'
 import Link from 'next/link'
-import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
 import getSlug from '@utils/get-slug'
+import { Github } from '@components/icon'
 import { Logo, Container } from '@components/ui'
-import { Github, DoubleChevron } from '@components/icon'
-
+import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
+import { I18nWidget } from '@components/core'
 interface Props {
   className?: string
   children?: any
@@ -82,13 +82,7 @@ const Footer: FC<Props> = ({ className, pages }) => {
           <div className="col-span-1 lg:col-span-6 flex items-start lg:justify-end text-primary">
             <div className="flex space-x-6 items-center h-10">
               <Github />
-              <div className="h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center">
-                <img className="" src="/flag-us.png" />
-                <span>English</span>
-                <span className="">
-                  <DoubleChevron />
-                </span>
-              </div>
+              <I18nWidget />
             </div>
           </div>
         </div>

components/core/I18nWidget/I18nWidget.module.css

@@ -0,0 +1,23 @@
+.root {
+  @apply relative;
+}
+
+.button {
+  @apply h-10 px-2 rounded-md border border-accents-2 flex items-center space-x-2 justify-center;
+}
+
+.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 block hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900 items-center;
+  text-transform: capitalize;
+}
+
+.item.active {
+}

components/core/I18nWidget/I18nWidget.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react'
+import s from './I18nWidget.module.css'
+import { Menu } from '@headlessui/react'
+import { DoubleChevron } from '@components/icon'
+import cn from 'classnames'
+
+const I18nWidget: FC = () => {
+  return (
+    <nav className={s.root}>
+      <Menu>
+        <Menu.Button className={s.button}>
+          <img className="" src="/flag-us.png" />
+          <span>English</span>
+          <span className="">
+            <DoubleChevron />
+          </span>
+        </Menu.Button>
+        <Menu.Items className={s.dropdownMenu}>
+          <Menu.Item>
+            {({ active }) => (
+              <a
+                className={cn(s.item, { [s.active]: active })}
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault()
+                }}
+              >
+                Español
+              </a>
+            )}
+          </Menu.Item>
+        </Menu.Items>
+      </Menu>
+    </nav>
+  )
+}
+
+export default I18nWidget

components/core/I18nWidget/index.ts

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

components/core/index.ts

@@ -8,3 +8,4 @@ export { default as UserNav } from './UserNav'
 export { default as Toggle } from './Toggle'
 export { default as Head } from './Head'
 export { default as HTMLContent } from './HTMLContent'
+export { default as I18nWidget } from './I18nWidget'