Redesigns footer (#1065)

components/icons/logo.tsx

@@ -1,3 +1,5 @@
+import clsx from 'clsx';
+
 export default function LogoIcon({ className }: { className?: string }) {
   return (
     <svg
@@ -8,12 +10,11 @@ export default function LogoIcon({ className }: { className?: string }) {
       strokeLinecap="round"
       strokeLinejoin="round"
       shapeRendering="geometricPrecision"
-      className={className}
+      className={clsx('h-4 w-4', className)}
     >
-      <rect width="100%" height="100%" rx="16" className="fill-black dark:fill-white" />
       <path
-        className=" fill-white dark:fill-black"
+        className=" fill-black dark:fill-white"
-        d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
+        d="M19.1999 7.59974L16 2L0 30H6.32501L19.1999 7.59974ZM23.2351 14.6614L20.035 20.3476L22.3566 24.4108H17.7482L14.6025 30H32L23.2351 14.6614Z"
       />
     </svg>
   );

components/icons/vercel.tsx

@@ -1,20 +0,0 @@
-export default function VercelIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      aria-label="Vercel.com Logo"
-      viewBox="0 0 89 20"
-      fill="currentColor"
-      shapeRendering="geometricPrecision"
-      className={className}
-    >
-      <path d="M11.5625 0L23.125 20H0L11.5625 0Z" />
-      <path d="M49.875 10.625C49.875 7.40625 47.5 5.15625 44.0937 5.15625C40.6875 5.15625 38.3125 7.40625 38.3125 10.625C38.3125 13.7812 40.875 16.0937 44.4062 16.0937C46.3438 16.0937 48.0938 15.375 49.2188 14.0625L47.0938 12.8437C46.4375 13.5 45.4688 13.9062 44.4062 13.9062C42.8438 13.9062 41.5 13.0625 41.0312 11.7812L40.9375 11.5625H49.7812C49.8438 11.25 49.875 10.9375 49.875 10.625ZM40.9062 9.6875L40.9688 9.5C41.375 8.15625 42.5625 7.34375 44.0625 7.34375C45.5938 7.34375 46.75 8.15625 47.1562 9.5L47.2188 9.6875H40.9062Z" />
-      <path d="M83.5313 10.625C83.5313 7.40625 81.1563 5.15625 77.75 5.15625C74.3438 5.15625 71.9688 7.40625 71.9688 10.625C71.9688 13.7812 74.5313 16.0937 78.0625 16.0937C80 16.0937 81.75 15.375 82.875 14.0625L80.75 12.8437C80.0938 13.5 79.125 13.9062 78.0625 13.9062C76.5 13.9062 75.1563 13.0625 74.6875 11.7812L74.5938 11.5625H83.4375C83.5 11.25 83.5313 10.9375 83.5313 10.625ZM74.5625 9.6875L74.625 9.5C75.0313 8.15625 76.2188 7.34375 77.7188 7.34375C79.25 7.34375 80.4063 8.15625 80.8125 9.5L80.875 9.6875H74.5625Z" />
-      <path d="M68.5313 8.84374L70.6563 7.62499C69.6563 6.06249 67.875 5.18749 65.7188 5.18749C62.3125 5.18749 59.9375 7.43749 59.9375 10.6562C59.9375 13.875 62.3125 16.125 65.7188 16.125C67.875 16.125 69.6563 15.25 70.6563 13.6875L68.5313 12.4687C67.9688 13.4062 66.9688 13.9375 65.7188 13.9375C63.75 13.9375 62.4375 12.625 62.4375 10.6562C62.4375 8.68749 63.75 7.37499 65.7188 7.37499C66.9375 7.37499 67.9688 7.90624 68.5313 8.84374Z" />
-      <path d="M88.2188 1.75H85.7188V15.8125H88.2188V1.75Z" />
-      <path d="M40.1563 1.75H37.2813L31.7813 11.25L26.2813 1.75H23.375L31.7813 16.25L40.1563 1.75Z" />
-      <path d="M57.8438 8.0625C58.125 8.0625 58.4062 8.09375 58.6875 8.15625V5.5C56.5625 5.5625 54.5625 6.75 54.5625 8.21875V5.5H52.0625V15.8125H54.5625V11.3437C54.5625 9.40625 55.9062 8.0625 57.8438 8.0625Z" />
-    </svg>
-  );
-}

components/layout/footer-menu.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import clsx from 'clsx';
+import { Menu } from 'lib/shopify/types';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+const FooterMenuItem = ({ item }: { item: Menu }) => {
+  const pathname = usePathname();
+  const [active, setActive] = useState(pathname === item.path);
+
+  useEffect(() => {
+    setActive(pathname === item.path);
+  }, [pathname, item.path]);
+
+  return (
+    <li className="mt-2 first:mt-1">
+      <Link
+        href={item.path}
+        className={clsx(' hover:text-black dark:hover:text-white', {
+          'text-black dark:text-white': active
+        })}
+      >
+        {item.title}
+      </Link>
+    </li>
+  );
+};
+
+export default async function FooterMenu({ menu }: { menu: Menu[] }) {
+  if (!menu.length) return null;
+
+  return (
+    <nav>
+      <ul>
+        {menu.map((item: Menu) => {
+          return <FooterMenuItem key={item.title} item={item} />;
+        })}
+      </ul>
+    </nav>
+  );
+}

components/layout/footer.tsx

@@ -1,68 +1,66 @@
 import Link from 'next/link';
 
 import GitHubIcon from 'components/icons/github';
-import LogoIcon from 'components/icons/logo';
+import FooterMenu from 'components/layout/footer-menu';
-import VercelIcon from 'components/icons/vercel';
+import LogoSquare from 'components/logo-square';
 import { getMenu } from 'lib/shopify';
-import { Menu } from 'lib/shopify/types';
+import { Suspense } from 'react';
 
 const { SITE_NAME } = process.env;
 
 export default async function Footer() {
   const currentYear = new Date().getFullYear();
   const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
+  const skeleton = 'w-full h-6 animate-pulse rounded bg-gray-200 dark:bg-gray-700';
   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">
+    <footer className="text-gray-400 dark:text-gray-500">
-      <div className="mx-auto w-full max-w-7xl px-6">
+      <div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-gray-200 px-6 py-12 dark:border-gray-700 md:flex-row md:gap-12 md:px-0">
-        <div className="grid grid-cols-1 gap-8 border-b border-gray-700 py-12 transition-colors duration-150 lg:grid-cols-12">
+        <div>
-          <div className="col-span-1 lg:col-span-3">
+          <Link className="flex items-center gap-2 text-black dark:text-white" href="/">
-            <a className="flex flex-initial items-center font-bold md:mr-24" href="/">
+            <LogoSquare size="sm" />
-              <span className="mr-2">
+            <span className="font-bold uppercase">{SITE_NAME}</span>
-                <LogoIcon className="h-8" />
+          </Link>
-              </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">
+        <Suspense
+          fallback={
+            <div className="flex h-[188px] w-[200px] flex-col gap-2">
+              <div className={skeleton} />
+              <div className={skeleton} />
+              <div className={skeleton} />
+              <div className={skeleton} />
+              <div className={skeleton} />
+              <div className={skeleton} />
+            </div>
+          }
+        >
+          <FooterMenu menu={menu} />
+        </Suspense>
+        <div className="md:ml-auto">
+          <a
+            className="flex items-center gap-2 hover:text-black dark:hover:text-white"
+            aria-label="Github Repository"
+            href="https://github.com/vercel/commerce"
+          >
+            <GitHubIcon className="h-6" />
+            <p>Source</p>
+          </a>
+        </div>
+      </div>
+      <div className="border-t border-gray-200 py-6 text-sm dark:border-gray-700">
+        <div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 md:flex-row md:gap-0">
           <p>
             &copy; {copyrightDate} {SITE_NAME}. All rights reserved.
           </p>
-          <div className="flex items-center text-sm text-white dark:text-black">
+          <hr className="mx-4 hidden h-4 w-[1px] border-l border-gray-400 md:inline-block" />
-            <span className="text-black dark:text-white">Created by</span>
+          <p>Designed in California</p>
-            <a
+          <p className="md:ml-auto">
-              rel="noopener noreferrer"
+            Crafted by{' '}
-              href="https://vercel.com"
+            <a href="https://vercel.com" className="text-black dark:text-white">
-              aria-label="Vercel.com Link"
+              ▲ Vercel
-              target="_blank"
-              className="text-black dark:text-white"
-            >
-              <VercelIcon className="ml-3 inline-block h-6" />
             </a>
-          </div>
+          </p>
         </div>
       </div>
     </footer>

components/logo-square.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+import LogoIcon from './icons/logo';
+
+export default function LogoSquare({ size }: { size: 'sm' | undefined }) {
+  return (
+    <div
+      className={clsx(
+        'flex items-center justify-center border border-gray-200 dark:border-gray-700',
+        {
+          'h-[40px] w-[40px] rounded-xl': !size,
+          'h-[30px] w-[30px] rounded-lg': size === 'sm'
+        }
+      )}
+    >
+      <LogoIcon className="h-3 w-3" />
+    </div>
+  );
+}