Updates

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;
+}