Iterated with translations

components/layout/footer.tsx

@@ -1,70 +0,0 @@
-import Link from 'next/link';
-
-import GitHubIcon from 'components/icons/github';
-import LogoIcon from 'components/icons/logo';
-import VercelIcon from 'components/icons/vercel';
-import { getMenu } from 'lib/shopify';
-import { Menu } from 'lib/shopify/types';
-
-const { SITE_NAME } = process.env;
-
-export default async function Footer() {
-  const currentYear = new Date().getFullYear();
-  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
-  const menu = await getMenu('next-js-frontend-footer-menu');
-
-  return (
-    <footer className="border-t border-gray-700 bg-white text-black dark:bg-black dark:text-white">
-      <div className="mx-auto w-full max-w-7xl px-6">
-        <div className="grid grid-cols-1 gap-8 border-b border-gray-700 py-12 transition-colors duration-150 lg:grid-cols-12">
-          <div className="col-span-1 lg:col-span-3">
-            <a className="flex flex-initial items-center font-bold md:mr-24" href="/">
-              <span className="mr-2">
-                <LogoIcon className="h-8" />
-              </span>
-              <span>{SITE_NAME}</span>
-            </a>
-          </div>
-          {menu.length ? (
-            <nav className="col-span-1 lg:col-span-7">
-              <ul className="grid md:grid-flow-col md:grid-cols-3 md:grid-rows-4">
-                {menu.map((item: Menu) => (
-                  <li key={item.title} className="py-3 md:py-0 md:pb-4">
-                    <Link
-                      href={item.path}
-                      className="text-gray-800 transition duration-150 ease-in-out hover:text-gray-300 dark:text-gray-100"
-                    >
-                      {item.title}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          ) : null}
-          <div className="col-span-1 text-black dark:text-white lg:col-span-2">
-            <a aria-label="Github Repository" href="https://github.com/vercel/commerce">
-              <GitHubIcon className="h-6" />
-            </a>
-          </div>
-        </div>
-        <div className="flex flex-col items-center justify-between space-y-4 pb-10 pt-6 text-sm md:flex-row">
-          <p>
-            &copy; {copyrightDate} {SITE_NAME}. All rights reserved.
-          </p>
-          <div className="flex items-center text-sm text-white dark:text-black">
-            <span className="text-black dark:text-white">Created by</span>
-            <a
-              rel="noopener noreferrer"
-              href="https://vercel.com"
-              aria-label="Vercel.com Link"
-              target="_blank"
-              className="text-black dark:text-white"
-            >
-              <VercelIcon className="ml-3 inline-block h-6" />
-            </a>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-}

components/layout/footer/footer.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import Logo from 'components/ui/logo/logo';
+import { useTranslations } from 'next-intl';
+
+interface FooterProps {}
+
+const Footer = () => {
+  const currentYear = new Date().getFullYear();
+  const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
+  const t = useTranslations('ui');
+
+  return (
+    <footer className="border-t border-ui-border bg-app">
+      <div className="mx-auto w-full py-2 px-4 lg:py-3 lg:px-8 2xl:px-16">
+        <div className="flex w-full justify-between items-baseline my-12 transition-colors duration-150">
+          <div className="">
+            <a className="flex flex-initial items-center font-bold md:mr-24" href="/">
+              <Logo />
+            </a>
+          </div>
+          <p>
+            &copy; {copyrightDate} - {t('copyright')}
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

components/layout/footer/index.ts

@@ -0,0 +1,2 @@
+export { default } from './footer';
+

components/layout/header/header-root.tsx

@@ -0,0 +1,8 @@
+import { cn } from 'lib/utils'
+import { FC, ReactNode } from 'react'
+
+const HeaderRoot: FC<{ children?: ReactNode }> = ({ children }) => {
+  return <header className={cn('w-full bg-app')}>{children}</header>
+}
+
+export default HeaderRoot

components/layout/header/header.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import Logo from 'components/ui/logo/logo'
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  navigationMenuTriggerStyle,
+} from 'components/ui/navigation-menu'
+import Link from 'next/link'
+import { FC } from 'react'
+import HeaderRoot from './header-root'
+
+interface HeaderProps {}
+
+const Header: FC<HeaderProps> = () => {
+
+  return (
+    <HeaderRoot>
+      <div className="relative flex flex-col">
+        <div className="relative flex items-center w-full justify-between py-2 px-4 h-14 lg:h-16 lg:py-3 lg:px-8 2xl:px-16">
+
+          <div className="flex items-center">
+            <Link
+              href="/"
+              className="cursor-pointer duration-100 ease-in-out absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 lg:relative lg:left-0 lg:top-0 lg:translate-x-0 lg:translate-y-0"
+              aria-label="Logo"
+            >
+              <Logo />
+            </Link>
+          </div>
+
+          <div className="absolute transform left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
+            <NavigationMenu delayDuration={0} className="hidden lg:block">
+              <NavigationMenuList>
+                <NavigationMenuItem>
+                  <Link href={'/kategori/junior'} legacyBehavior passHref>
+                    <NavigationMenuLink
+                      className={navigationMenuTriggerStyle()}
+                    >
+                      Junior
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <Link href={'/kategori/trojor'} legacyBehavior passHref>
+                    <NavigationMenuLink
+                      className={navigationMenuTriggerStyle()}
+                    >
+                      Tröjor
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+                <NavigationMenuItem>
+                  <Link href={'/kategori/byxor'} legacyBehavior passHref>
+                    <NavigationMenuLink
+                      className={navigationMenuTriggerStyle()}
+                    >
+                      Byxor
+                    </NavigationMenuLink>
+                  </Link>
+                </NavigationMenuItem>
+              </NavigationMenuList>
+            </NavigationMenu>
+          </div>
+        </div>
+      </div>
+    </HeaderRoot>
+  )
+}
+
+export default Header

components/layout/header/index.ts

@@ -0,0 +1,2 @@
+export { default } from './header';
+

components/layout/navbar/index.tsx

@@ -1,21 +1,18 @@
 import Link from 'next/link';
-import { Suspense } from 'react';
 
-import Cart from 'components/cart';
-import CartIcon from 'components/icons/cart';
 import LogoIcon from 'components/icons/logo';
-import { getMenu } from 'lib/shopify';
-import { Menu } from 'lib/shopify/types';
-import MobileMenu from './mobile-menu';
-import Search from './search';
+// import { getMenu } from 'lib/shopify';
+// import { Menu } from 'lib/shopify/types';
+// import MobileMenu from './mobile-menu';
+// import Search from './search';
 
 export default async function Navbar() {
-  const menu = await getMenu('next-js-frontend-header-menu');
+  // const menu = await getMenu('next-js-frontend-header-menu');
 
   return (
     <nav className="relative flex items-center justify-between bg-white p-4 dark:bg-black lg:px-6">
       <div className="block w-1/3 md:hidden">
-        <MobileMenu menu={menu} />
+        {/* <MobileMenu menu={menu} /> */}
       </div>
       <div className="flex justify-self-center md:w-1/3 md:justify-self-start">
         <div className="md:mr-4">
@@ -23,7 +20,7 @@ export default async function Navbar() {
             <LogoIcon className="h-8 transition-transform hover:scale-110" />
           </Link>
         </div>
-        {menu.length ? (
+        {/* {menu.length ? (
           <ul className="hidden md:flex">
             {menu.map((item: Menu) => (
               <li key={item.title}>
@@ -36,17 +33,17 @@ export default async function Navbar() {
               </li>
             ))}
           </ul>
-        ) : null}
+        ) : null} */}
       </div>
       <div className="hidden w-1/3 md:block">
-        <Search />
+        {/* <Search /> */}
       </div>
 
       <div className="flex w-1/3 justify-end">
-        <Suspense fallback={<CartIcon className="h-6" />}>
+        {/* <Suspense fallback={<CartIcon className="h-6" />}> */}
           {/* @ts-expect-error Server Component */}
-          <Cart />
-        </Suspense>
+          {/* <Cart /> */}
+        {/* </Suspense> */}
       </div>
     </nav>
   );