Updates

components/layout/dynamic-content-manager/dynamic-content-manager.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Info } from 'lucide-react';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
 import dynamic from 'next/dynamic';
 
 import Hero from 'components/modules/hero';
@@ -57,7 +57,7 @@ const getContentComponent = ({ _type, _key, disabled, ...rest }: getContentCompo
           key={`index-${_key}`}
         >
           <span className="inline-flex items-center bg-red p-2 text-sm font-bold">
-            <Info className="mr-1" />
+            <InfoCircledIcon className="mr-1" />
             {`No matching component (Type: ${_type})`}
           </span>
         </div>

components/layout/footer/copyright.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useTranslations } from 'next-intl';
 
 export default function CopyRight() {

components/layout/footer/footer.tsx

@@ -1,32 +1,72 @@
+import Text from '@/components/ui/text';
+import { footerMenuQuery } from '@/lib/sanity/queries';
+import { clientFetch } from '@/lib/sanity/sanity.client';
 import LocaleSwitcher from 'components/ui/locale-switcher/locale-switcher';
 import Logo from 'components/ui/logo/logo';
 import Link from 'next/link';
 import CopyRight from './copyright';
 
-// interface FooterProps {
-//   localeData: {
-//     type: string;
-//     locale: string;
-//     translations: [];
-//   };
-// }
+interface FooterProps {
+  locale: string;
+}
+
+export default async function Footer({ locale }: FooterProps) {
+  const params = {
+    locale: locale
+  };
+
+  const footerMenus = await clientFetch(footerMenuQuery, params);
 
-const Footer = () => {
   return (
     <footer className="border-t border-ui-border bg-app">
       <div className="mx-auto flex w-full flex-col">
-        <div className="flex w-full flex-col items-center space-y-2 p-4 transition-colors duration-150 md:flex-row md:items-baseline md:justify-between md:space-y-0 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
+        <div className="flex w-full items-center justify-between p-4 transition-colors duration-150 md:space-y-0 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
           <Link className="flex flex-initial items-center font-bold md:mr-24" href="/">
             <Logo />
           </Link>
           <LocaleSwitcher />
         </div>
+
+        {footerMenus.length > 0 && (
+          <div className="grid w-full grid-cols-2 gap-4 p-4 lg:grid-cols-4 lg:gap-8 lg:px-8 lg:py-6 2xl:px-16 2xl:py-8">
+            {footerMenus.map((menu: object | any, index: number) => {
+              return (
+                <div key={index}>
+                  <Text variant="label">{menu.title}</Text>
+                  <ul className="mt-2 flex flex-col space-y-1" aria-label={menu.title}>
+                    {menu.menu.links.map((link: object | any, index: number) => {
+                      return (
+                        <li className="text-sm" key={index}>
+                          {link._type == 'linkInternal' ? (
+                            <Link
+                              className="hover:underline"
+                              href={`/${link.reference.locale}/${link.reference.slug.current}`}
+                            >
+                              {link.title}
+                            </Link>
+                          ) : (
+                            <a
+                              className="hover:underline"
+                              href={link.url}
+                              target={link.newWindow ? '_blank' : '_self'}
+                            >
+                              {link.title}
+                            </a>
+                          )}
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </div>
+              );
+            })}
+          </div>
+        )}
+
         <div className="flex items-center justify-center border-t border-ui-border bg-black px-4 py-3 lg:px-8 2xl:px-16">
           <CopyRight />
         </div>
       </div>
     </footer>
   );
-};
-
-export default Footer;
+}

components/layout/header/header.tsx

@@ -1,27 +1,42 @@
+import Cart from 'components/cart';
+import OpenCart from 'components/cart/open-cart';
 import Logo from 'components/ui/logo/logo';
-import { useLocale } from 'next-intl';
 import Link from 'next/link';
+import { Suspense } from 'react';
 import HeaderRoot from './header-root';
+import MobileModal from './mobile-modal';
 
-const Header = () => {
-  const locale = useLocale();
+interface HeaderProps {
+  locale: string;
+}
 
+const Header = ({ locale }: HeaderProps) => {
   return (
     <HeaderRoot>
       <div className="relative flex flex-col">
         <div className="relative flex h-14 w-full items-center justify-between px-4 py-2 lg:h-16 lg:px-8 lg:py-3 2xl:px-16">
+          <div className="md:hidden">
+            <MobileModal />
+          </div>
+
           <div className="flex items-center">
             <Link
               href={`/${locale}`}
-              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0"
+              className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform cursor-pointer duration-100 ease-in-out md:relative md:left-0 md:top-0 md:translate-x-0 md:translate-y-0"
               aria-label="Logo"
             >
               <Logo />
             </Link>
           </div>
 
-          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-            Menu
+          <div className="absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 transform md:flex">
+            Desktop Menu
+          </div>
+          <div className="flex justify-end md:w-1/3">
+            <Suspense fallback={<OpenCart />}>
+              {/*// @ts-ignore */}
+              <Cart />
+            </Suspense>
           </div>
         </div>
       </div>

components/layout/header/mobile-modal.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import MenuIcon from '@/components/icons/menu';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { useState } from 'react';
+
+export default function MobileModal() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      <Sheet open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
+        <SheetTrigger aria-label="Open menu">
+          <div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-ui-border text-high-contrast transition-colors">
+            <MenuIcon className="h-4 stroke-current transition-all ease-in-out hover:scale-110" />
+          </div>
+        </SheetTrigger>
+        <SheetContent side="left" className="bg-app">
+          <SheetHeader>
+            <SheetTitle className="text-lg font-semibold">Menu</SheetTitle>
+          </SheetHeader>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}