refactor: change layout and add select form shipping

app/[page]/layout.tsx

@@ -1,12 +1,9 @@
-import Footer from 'components/layout/footer';
-
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <>
       <div className="w-full">
         <div className="mx-8 max-w-2xl py-20 sm:mx-auto">{children}</div>
       </div>
-      <Footer />
     </>
   );
 }

app/checkout/page.tsx

@@ -1,13 +1,29 @@
 'use client';
 
+import { Accordion, AccordionItem, Checkbox } from '@nextui-org/react';
 import { useCart } from 'components/cart/cart-context';
 import CartItemView from 'components/cart/cart-item';
+import Price from 'components/price';
 import ShippingForm from 'components/shipping/form';
 import { OrderPayload } from 'lib/woocomerce/storeApi';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { z } from 'zod';
+
+const shippingSchema = z.object({
+  first_name: z.string().min(3),
+  last_name: z.string().min(3),
+  address_1: z.string().min(3),
+  address_2: z.string().optional(),
+  city: z.string().min(3),
+  state: z.string().min(3),
+  postcode: z.string().min(3),
+  country: z.string().min(3)
+});
 
 export default function CheckoutPage() {
   const { cart } = useCart();
+  const router = useRouter();
 
   const initialState: OrderPayload = {
     shipping_address: {
@@ -38,6 +54,7 @@ export default function CheckoutPage() {
     payment_data: []
   };
   const [formData, setFormData] = useState(initialState);
+  const [sameBilling, setSameBilling] = useState(true);
   const handleChangeShipping = (e: any) => {
     setFormData(e);
   };
@@ -48,41 +65,74 @@ export default function CheckoutPage() {
 
   return (
     <section className="mx-auto grid h-full gap-4 px-4 pb-4">
-      <div className="col-span-4 row-span-2 h-full rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
-        <p>Checkout</p>
-        <div className="flex flex-col justify-between overflow-hidden p-1">
-          <ul className="flex-grow overflow-auto py-4">
-            {cart &&
-              cart.items?.length &&
-              cart.items
-                .sort((a, b) => a.name.localeCompare(b.name))
-                .map((item, i) => {
-                  return (
-                    <li
-                      key={i}
-                      className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
-                    >
-                      <CartItemView item={item} />
-                    </li>
-                  );
-                })}
-          </ul>
+      <p>Checkout</p>
+      <form
+        action={() => {
+          try {
+            console.log(formData);
+            shippingSchema.parse(formData.shipping_address);
+          } catch (error) {
+            console.log(error);
+          }
+        }}
+        className="rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-black"
+      >
+        <div className="flew-row col-span-4 row-span-2 flex">
+          <Accordion defaultExpandedKeys={['1']} className="text-white md:w-2/3">
+            <AccordionItem key="1" title="Shipping Info" className="text-white">
+              <ShippingForm className="p-4" handleChangeAction={handleChangeShipping} />
+              <Checkbox onValueChange={(v) => setSameBilling(v)} className="mt-2">
+                Use same address for billing?
+              </Checkbox>
+            </AccordionItem>
+            <AccordionItem key="2" title="Billing Info" className="text-white">
+              <ShippingForm className="p-4" handleChangeAction={handleChangeBilling} />
+            </AccordionItem>
+            <AccordionItem key="3" title="Payment" className="text-white">
+              <div className="flex flex-col justify-between overflow-hidden p-1">
+                <h2 className="mt-2 text-2xl font-bold">Payment</h2>
+              </div>
+            </AccordionItem>
+          </Accordion>
+
+          {cart && (
+            <div className="ms-4 flex flex-col justify-between overflow-hidden md:w-1/3">
+              <ul className="flex-grow overflow-auto">
+                {cart.items?.length &&
+                  cart.items
+                    .sort((a, b) => a.name.localeCompare(b.name))
+                    .map((item, i) => {
+                      return (
+                        <li
+                          key={i}
+                          className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
+                        >
+                          <CartItemView item={item} />
+                        </li>
+                      );
+                    })}
+              </ul>
+              <div className="mb-3 flex items-center justify-between pb-4 pt-4 dark:border-neutral-700">
+                <p>Total</p>
+                <Price
+                  className="text-right text-base text-black dark:text-white"
+                  amount={cart?.totals?.total_price}
+                  needSplit
+                  currencyCode={cart?.totals.currency_code}
+                />
+              </div>
+            </div>
+          )}
         </div>
-      </div>
-
-      <div className="col-span-4 row-span-2 h-full rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
-        <ShippingForm title="Shippping Info" handleChangeAction={handleChangeShipping} />
-      </div>
-
-      <div className="col-span-4 row-span-2 h-full rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
-        <ShippingForm title="Billing Info" handleChangeAction={handleChangeBilling} />
-      </div>
-
-      <div className="col-span-4 row-span-2 h-full rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
-        <div className="flex flex-col justify-between overflow-hidden p-1">
-          <h2 className="mt-2 text-2xl font-bold">Payment</h2>
+        <div className="flex justify-center gap-4">
+          <button className="rounded-md bg-indigo-500 p-2 text-white" onClick={() => router.back()}>
+            Back
+          </button>
+          <button type="submit" className="rounded-md bg-indigo-500 p-2 text-white">
+            Next
+          </button>
         </div>
-      </div>
+      </form>
     </section>
   );
 }

app/error.tsx

@@ -2,7 +2,7 @@
 
 export default function Error({ reset }: { reset: () => void }) {
   return (
-    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 dark:border-neutral-800 dark:bg-black">
+    <div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
       <h2 className="text-xl font-bold">Oh no!</h2>
       <p className="my-2">
         There was an issue with our storefront. This could be a temporary issue, please try your

app/layout.tsx

@@ -1,4 +1,5 @@
 import { CartProvider } from 'components/cart/cart-context';
+import Footer from 'components/layout/footer';
 import { Navbar } from 'components/layout/navbar';
 import { NextAuthProvider } from 'components/next-session-provider';
 import { WelcomeToast } from 'components/welcome-toast';
@@ -48,6 +49,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
               <WelcomeToast />
             </main>
           </CartProvider>
+          <Footer />
         </NextAuthProvider>
       </body>
     </html>

app/page.tsx

@@ -1,6 +1,5 @@
 import { Carousel } from 'components/carousel';
 import { ThreeItemGrid } from 'components/grid/three-items';
-import Footer from 'components/layout/footer';
 
 export const metadata = {
   description: 'High-performance ecommerce store built with Next.js, Vercel, and Shopify.',
@@ -14,7 +13,6 @@ export default async function HomePage() {
     <>
       <ThreeItemGrid />
       <Carousel />
-      <Footer />
     </>
   );
 }

app/product/[name]/page.tsx

@@ -2,7 +2,6 @@ import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 
 import { AddToCart } from 'components/cart/add-to-cart';
-import Footer from 'components/layout/footer';
 import { Gallery } from 'components/product/gallery';
 import { ProductProvider } from 'components/product/product-context';
 import { ProductDescription } from 'components/product/product-description';
@@ -77,7 +76,7 @@ export default async function ProductPage(props: { params: Promise<{ name: strin
         }}
       />
       <div className="mx-auto max-w-screen-2xl px-4">
-        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12 lg:flex-row lg:gap-8 dark:border-neutral-800 dark:bg-black">
+        <div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8">
           <div className="h-full w-full basis-full lg:basis-4/6">
             <Suspense
               fallback={
@@ -116,7 +115,6 @@ export default async function ProductPage(props: { params: Promise<{ name: strin
           </div>
         </div>
       </div>
-      <Footer />
     </ProductProvider>
   );
 }

app/profile/page.tsx

@@ -28,74 +28,79 @@ export default function ProfilePage() {
   }, []);
 
   return (
-    <section className="mx-auto mt-4 grid max-w-screen-2xl justify-center gap-4 px-4 pb-4">
+    <section className="mx-auto mt-4 grid max-w-screen-2xl gap-4 px-4 pb-4">
       <h1 className="text-2xl font-bold">Profile</h1>
-      <h2 className="text-2xl font-bold">Info</h2>
-      {customer && (
-        <div>
-          <img src={customer.avatar_url} alt="avatar" className="h-11 w-11" />
-          <div className="flex flex-col">
-            <div className="mt-4">
-              <label
-                htmlFor="name"
-                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-              >
-                Name
-              </label>
-              <input
-                type="text"
-                id="name"
-                value={customer.first_name}
-                className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-                disabled
-              />
-            </div>
-            <div className="mt-4">
-              <label
-                htmlFor="lastname"
-                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-              >
-                Cognome
-              </label>
-              <input
-                type="text"
-                id="lastname"
-                value={customer.last_name}
-                className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-                disabled
-              />
-            </div>
-            <div className="mt-4">
-              <label
-                htmlFor="email"
-                className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-              >
-                Email
-              </label>
-              <input
-                type="email"
-                id="email"
-                value={customer.email}
-                className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-                disabled
-              />
-
-              <ShippingForm title="Shipping Info" handleChangeAction={setShippingAddress} />
-
+      <div className="rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-black">
+        <h2 className="text-2xl font-bold">Info</h2>
+        {customer && (
+          <div>
+            <img src={customer.avatar_url} alt="avatar" className="h-11 w-11" />
+            <div className="flex flex-col">
               <div className="mt-4">
-                <Link href={`/profile/orders`}>
-                  <button type="button" className="w-full rounded-md bg-indigo-500 p-3 text-white">
-                    Orders
-                  </button>
-                </Link>
+                <label
+                  htmlFor="name"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                >
+                  Name
+                </label>
+                <input
+                  type="text"
+                  id="name"
+                  value={customer.first_name}
+                  className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+                  disabled
+                />
               </div>
               <div className="mt-4">
-                <LogoutButton />
+                <label
+                  htmlFor="lastname"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                >
+                  Cognome
+                </label>
+                <input
+                  type="text"
+                  id="lastname"
+                  value={customer.last_name}
+                  className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+                  disabled
+                />
+              </div>
+              <div className="mt-4">
+                <label
+                  htmlFor="email"
+                  className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+                >
+                  Email
+                </label>
+                <input
+                  type="email"
+                  id="email"
+                  value={customer.email}
+                  className="mt-1 block w-full rounded-md border-gray-300 p-3 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+                  disabled
+                />
+
+                <ShippingForm title="Shipping Info" handleChangeAction={setShippingAddress} />
+
+                <div className="mt-4">
+                  <Link href={`/profile/orders`}>
+                    <button
+                      type="button"
+                      className="w-full rounded-md bg-indigo-500 p-3 text-white"
+                    >
+                      Orders
+                    </button>
+                  </Link>
+                </div>
+                <div className="mt-4">
+                  <LogoutButton />
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </section>
   );
 }

app/search/layout.tsx

@@ -1,4 +1,3 @@
-import Footer from 'components/layout/footer';
 import FilterList from 'components/layout/search/filter';
 import { sorting } from 'lib/constants';
 import { Suspense } from 'react';
@@ -7,7 +6,7 @@ import ChildrenWrapper from './children-wrapper';
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
     <>
-      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row dark:text-white">
+      <div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
         <div className="order-first w-full flex-none md:max-w-[150px]">
           <FilterList list={sorting} title="Sort by" />
         </div>
@@ -18,7 +17,6 @@ export default function SearchLayout({ children }: { children: React.ReactNode }
         </div>
         <div className="order-none flex-none md:order-last md:w-[100px]"></div>
       </div>
-      <Footer />
     </>
   );
 }

components/cart/modal.tsx

@@ -64,7 +64,7 @@ export default function CartModal() {
             leaveFrom="translate-x-0"
             leaveTo="translate-x-full"
           >
-            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[390px] dark:border-neutral-700 dark:bg-black/80 dark:text-white">
+            <Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
               <div className="flex items-center justify-between">
                 <p className="text-lg font-semibold">My Cart</p>
                 <button aria-label="Close cart" onClick={closeCart}>

components/layout/footer-menu.tsx

@@ -23,7 +23,7 @@ export function FooterMenuItem({ item }: { item: Menu }) {
       <Link
         href={item.path}
         className={clsx(
-          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline md:inline-block md:text-sm dark:hover:text-neutral-300',
+          'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
           {
             'text-black dark:text-neutral-300': active
           }

components/layout/footer.tsx

@@ -36,9 +36,9 @@ export default async function Footer() {
 
   return (
     <footer className="text-sm text-neutral-500 dark:text-neutral-400">
-      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0 dark:border-neutral-700">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0">
         <div>
-          <Link className="flex items-center gap-2 text-black md:pt-1 dark:text-white" href="/">
+          <Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
             <LogoSquare size="sm" />
             <span className="uppercase">{SITE_NAME}</span>
           </Link>

components/layout/navbar/mobile-menu.tsx

@@ -39,7 +39,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
       <button
         onClick={openMobileMenu}
         aria-label="Open mobile menu"
-        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors md:hidden dark:border-neutral-700 dark:text-white"
+        className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
       >
         <Bars3Icon className="h-4" />
       </button>

components/layout/navbar/search.tsx

@@ -16,7 +16,7 @@ export default function Search() {
         placeholder="Search for products..."
         autoComplete="off"
         defaultValue={searchParams?.get('q') || ''}
-        className="text-md w-full rounded-lg border bg-white px-4 py-2 text-black placeholder:text-neutral-500 md:text-sm dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
+        className="text-md w-full rounded-lg border bg-white px-4 py-2 text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400 md:text-sm"
       />
       <div className="absolute right-0 top-0 mr-3 flex h-full items-center">
         <MagnifyingGlassIcon className="h-4" />

components/layout/search/filter/index.tsx

@@ -32,7 +32,7 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
     <>
       <nav>
         {title ? (
-          <h3 className="hidden text-xs text-neutral-500 md:block dark:text-neutral-400">
+          <h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
             {title}
           </h3>
         ) : null}

components/shipping/form.tsx

@@ -1,12 +1,19 @@
 'use client';
+import { Avatar, Select, SelectItem } from '@nextui-org/react';
+import clsx from 'clsx';
 import { Shipping } from 'lib/woocomerce/models/shipping';
 import { useState } from 'react';
+import countriesJson from '../../types/countries.json';
+
+export const countries = countriesJson as { country: string; flag_base64: string }[];
 
 export default function ShippingForm({
+  className,
   title,
   handleChangeAction
 }: {
-  title: string;
+  className?: string;
+  title?: string;
   handleChangeAction?: (data: Shipping) => void;
 }) {
   const initialState: Shipping = {
@@ -31,85 +38,102 @@ export default function ShippingForm({
   };
 
   return (
-    <div className="flex flex-col justify-between overflow-hidden p-1">
-      <form className="flex flex-col gap-4">
-        <h2 className="mt-2 text-2xl font-bold">{title}</h2>
-        <div className="mt-4">
-          <label
-            htmlFor="address_1"
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-          >
-            Address
-          </label>
-          <input
-            type="text"
-            name="address_1"
-            value={formData.address_1}
-            onChange={onChange}
-            className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          />
-        </div>
-        <div className="mt-4">
-          <label
-            htmlFor="city"
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-          >
-            City
-          </label>
-          <input
-            type="text"
-            name="city"
-            value={formData.city}
-            onChange={onChange}
-            className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          />
-        </div>
-        <div className="mt-4">
-          <label
-            htmlFor="state"
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-          >
-            State
-          </label>
-          <input
-            type="text"
-            name="state"
-            value={formData.state}
-            onChange={onChange}
-            className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          />
-        </div>
-        <div className="mt-4">
-          <label
-            htmlFor="postcode"
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-          >
-            Postcode
-          </label>
-          <input
-            type="text"
-            name="postcode"
-            value={formData.postcode}
-            onChange={onChange}
-            className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          />
-        </div>
-        <div className="mt-4">
-          <label
-            htmlFor="country"
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-          >
-            Country
-          </label>
-          <input
-            type="text"
+    <div className={clsx('flex flex-col gap-4', className)}>
+      {title && <h2 className="mt-2 text-2xl font-bold">{title}</h2>}
+      <div className="mt-4">
+        <label
+          htmlFor="address_1"
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          Address <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          name="address_1"
+          value={formData.address_1}
+          onChange={onChange}
+          className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+          required
+        />
+      </div>
+      <div className="mt-4">
+        <label
+          htmlFor="city"
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          City <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          name="city"
+          value={formData.city}
+          onChange={onChange}
+          className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+          required
+        />
+      </div>
+      <div className="mt-4">
+        <label
+          htmlFor="state"
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          State <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          name="state"
+          value={formData.state}
+          onChange={onChange}
+          className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+          required
+        />
+      </div>
+      <div className="mt-4">
+        <label
+          htmlFor="postcode"
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          Postcode <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          name="postcode"
+          value={formData.postcode}
+          onChange={onChange}
+          className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
+          required
+        />
+      </div>
+      <div className="mt-4">
+        <label
+          htmlFor="country"
+          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
+        >
+          Country <span className="text-red-500">*</span>
+        </label>
+        <div>
+          <Select
+            className="max-w-xs"
+            isRequired
             name="country"
             value={formData.country}
-            onChange={onChange}
-            className="mt-1 block w-full rounded-md border-gray-300 p-3 text-black shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-lg"
-          />
+            onChange={(event) =>
+              onChange({ target: { name: 'country', value: event.target.value } })
+            }
+          >
+            {countries.map((item) => (
+              <SelectItem
+                key={item.country}
+                startContent={
+                  <Avatar alt={item.country + '-img'} className="h-6 w-6" src={item.flag_base64} />
+                }
+              >
+                {item.country}
+              </SelectItem>
+            ))}
+          </Select>
         </div>
-      </form>
+      </div>
     </div>
   );
 }

tailwind.config.ts

@@ -38,6 +38,7 @@ const config: Config = {
   future: {
     hoverOnlyWhenSupported: true
   },
+  darkMode: 'class',
   plugins: [
     require('@tailwindcss/container-queries'),
     require('@tailwindcss/typography'),

types/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.json' {
+  const value: any;
+  export default value;
+}