Add links to the categories & brands in the landing

pages/index.tsx

@@ -5,9 +5,11 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
 import rangeMap from '@lib/range-map'
+import { getCategoryPath, getDesignerPath } from '@utils/search'
 import { Layout } from '@components/core'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
+import Link from 'next/link'
 
 export async function getStaticProps({
   preview,
@@ -132,21 +134,29 @@ export default function Home({
           <div className="sticky top-32">
             <ul className="mb-10">
               <li className="py-1 text-base font-bold tracking-wide">
-                All Categories
+                <Link href={getCategoryPath('')}>
+                  <a>All Categories</a>
+                </Link>
               </li>
               {categories.map((cat) => (
                 <li key={cat.path} className="py-1 text-accents-8">
-                  <a href="#">{cat.name}</a>
+                  <Link href={getCategoryPath(cat.path)}>
+                    <a>{cat.name}</a>
+                  </Link>
                 </li>
               ))}
             </ul>
             <ul className="">
               <li className="py-1 text-base font-bold tracking-wide">
-                All Designers
+                <Link href={getDesignerPath('')}>
+                  <a>All Designers</a>
+                </Link>
               </li>
               {brands.flatMap(({ node }) => (
                 <li key={node.path} className="py-1 text-accents-8">
-                  <a href="#">{node.name}</a>
+                  <Link href={getDesignerPath(node.path)}>
+                    <a>{node.name}</a>
+                  </Link>
                 </li>
               ))}
             </ul>

pages/search.tsx

@@ -76,7 +76,7 @@ export default function Search({
               >
                 <Link
                   href={{
-                    pathname: getCategoryPath(getSlug(cat.path), brand),
+                    pathname: getCategoryPath(cat.path, brand),
                     query,
                   }}
                 >
@@ -100,7 +100,7 @@ export default function Search({
               >
                 <Link
                   href={{
-                    pathname: getDesignerPath(getSlug(node.path), category),
+                    pathname: getDesignerPath(node.path, category),
                     query,
                   }}
                 >

utils/search.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react'
+import getSlug from './get-slug'
 
 export function useSearchMeta(asPath: string) {
   const [pathname, setPathname] = useState<string>('/search')
@@ -34,11 +35,16 @@ export const filterQuery = (query: any) =>
     return obj
   }, {})
 
-export const getCategoryPath = (slug: string, brand?: string) =>
-  `/search${brand ? `/designers/${brand}` : ''}${slug ? `/${slug}` : ''}`
+export const getCategoryPath = (path: string, brand?: string) => {
+  const category = getSlug(path)
 
-export const getDesignerPath = (slug: string, category?: string) => {
-  const designer = slug.replace(/^brands/, 'designers')
+  return `/search${brand ? `/designers/${brand}` : ''}${
+    category ? `/${category}` : ''
+  }`
+}
+
+export const getDesignerPath = (path: string, category?: string) => {
+  const designer = getSlug(path).replace(/^brands/, 'designers')
 
   return `/search${designer ? `/${designer}` : ''}${
     category ? `/${category}` : ''