Central category link style

dgopsq · Aug 3, 2023 · 7f68bdb · 7f68bdb
1 parent 5ade3ba
commit 7f68bdb
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 30 deletions.
diff --git a/src/components/navigation/Categories.tsx b/src/components/navigation/Categories.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import { Link } from "@/components/core/Link";
-import { generateCategoryRoute } from "@/misc/navigation";
+import { CategoryLink } from "@/components/navigation/CategoryLink";
 import { classNames } from "@/misc/styles";
 import { Category } from "@/queries/categories/data";
 import { Popover, Transition } from "@headlessui/react";
@@ -20,7 +19,7 @@ export const Categories: React.FC<Props> = ({ categories }) => {
       <div className="flex h-full justify-center space-x-8">
         {categories.map((category) => (
           <Popover key={category.name} className="flex">
-            {({ open }) => (
+            {({ open, close }) => (
               <>
                 <div className="relative flex">
                   <Popover.Button
@@ -53,12 +52,11 @@ export const Categories: React.FC<Props> = ({ categories }) => {
                     <div className="relative bg-white">
                       <div className="mx-auto max-w-7xl px-8 my-10">
                         <div>
-                          <Link
-                            href={generateCategoryRoute(category.slug)}
-                            className="text-lg font-medium text-gray-900"
-                          >
-                            {category.name}
-                          </Link>
+                          <CategoryLink
+                            variant="main"
+                            slug={category.slug}
+                            name={category.name}
+                          />
                         </div>
 
                         <ul
@@ -68,13 +66,12 @@ export const Categories: React.FC<Props> = ({ categories }) => {
                         >
                           {category.children.map((subCategory) => (
                             <li key={subCategory.name}>
-                              <Popover.Button
-                                as={Link}
-                                href={generateCategoryRoute(subCategory.slug)}
-                                className="text-gray-500 hover:text-gray-800 text-sm font-medium"
-                              >
-                                {subCategory.name}
-                              </Popover.Button>
+                              <CategoryLink
+                                variant="sub"
+                                slug={subCategory.slug}
+                                name={subCategory.name}
+                                onClick={close}
+                              />
                             </li>
                           ))}
                         </ul>

diff --git a/src/components/navigation/CategoryLink.tsx b/src/components/navigation/CategoryLink.tsx
@@ -0,0 +1,38 @@
+import { Link } from "@/components/core/Link";
+import { generateCategoryRoute } from "@/misc/navigation";
+import { match } from "ts-pattern";
+
+type Props = {
+  variant: "main" | "sub";
+  slug: string;
+  name: string;
+  onClick?: () => void;
+};
+
+/**
+ *
+ */
+export const CategoryLink: React.FC<Props> = ({
+  variant,
+  slug,
+  name,
+  onClick,
+}) => {
+  const route = generateCategoryRoute(slug);
+
+  return (
+    <Link
+      href={route}
+      className={match(variant)
+        .with("main", () => "text-lg font-medium text-gray-900")
+        .with(
+          "sub",
+          () => "text-gray-500 hover:text-gray-800 text-sm font-medium"
+        )
+        .exhaustive()}
+      onClick={onClick}
+    >
+      {name}
+    </Link>
+  );
+};
diff --git a/src/components/navigation/MobileNavbar.tsx b/src/components/navigation/MobileNavbar.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import { CloseIcon } from "@/components/core/Icon";
-import { Link } from "@/components/core/Link";
-import { generateCategoryRoute } from "@/misc/navigation";
+import { CategoryLink } from "@/components/navigation/CategoryLink";
 import { Category } from "@/queries/categories/data";
 import { Dialog, Transition } from "@headlessui/react";
 import { Fragment } from "react";
@@ -62,13 +61,12 @@ export const MobileNavbar: React.FC<Props> = ({
                 <ul className="space-y-8">
                   {categories.map((category) => (
                     <li key={category.slug}>
-                      <Link
-                        href={generateCategoryRoute(category.slug)}
-                        className="text-lg font-medium text-gray-900"
+                      <CategoryLink
+                        variant="main"
+                        slug={category.slug}
+                        name={category.name}
                         onClick={() => setOpen(false)}
-                      >
-                        {category.name}
-                      </Link>
+                      />
 
                       <div>
                         <ul
@@ -78,13 +76,12 @@ export const MobileNavbar: React.FC<Props> = ({
                         >
                           {category.children.map((subCategory) => (
                             <li key={subCategory.name}>
-                              <Link
-                                href={generateCategoryRoute(subCategory.slug)}
-                                className="text-gray-500 hover:text-gray-800 text-sm font-medium"
+                              <CategoryLink
+                                variant="sub"
+                                slug={subCategory.slug}
+                                name={subCategory.name}
                                 onClick={() => setOpen(false)}
-                              >
-                                {subCategory.name}
-                              </Link>
+                              />
                             </li>
                           ))}
                         </ul>