Add underline

pages/search.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
 import { useRouter } from 'next/router'
 import Link from 'next/link'
+import cn from 'classnames'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
 import useSearch from '@lib/bigcommerce/products/use-search'
 import { Layout } from '@components/core'
@@ -38,8 +39,13 @@ export default function Home({
               All Categories
             </li>
             {categories.map((cat) => (
-              <li key={cat.path} className="py-1 text-default">
+              <li
-                <Link href={getCategoryPath(cat.path, brand)}>
+                key={cat.path}
+                className={cn('py-1 text-default', {
+                  underline: getSlug(cat.path) === category,
+                })}
+              >
+                <Link href={getCategoryPath(getSlug(cat.path), brand)}>
                   <a>{cat.name}</a>
                 </Link>
               </li>
@@ -50,8 +56,13 @@ export default function Home({
               All Designers
             </li>
             {brands.flatMap(({ node }) => (
-              <li key={node.path} className="py-1 text-default">
+              <li
-                <Link href={getDesignerPath(node.path, category)}>
+                key={node.path}
+                className={cn('py-1 text-default', {
+                  underline: getSlug(node.path) === `brands/${brand}`,
+                })}
+              >
+                <Link href={getDesignerPath(getSlug(node.path), category)}>
                   <a>{node.name}</a>
                 </Link>
               </li>
@@ -122,14 +133,13 @@ function useSearchMeta(asPath: string) {
   return { category, brand }
 }
 
-function getCategoryPath(path: string, designer?: string) {
+// Remove trailing and leading slash
-  return designer ? `/search/designers/${designer}${path}` : `/search${path}`
+const getSlug = (path: string) => path.replace(/^\/|\/$/g, '')
-}
 
-function getDesignerPath(path: string, category?: string) {
+const getCategoryPath = (slug: string, designer?: string) =>
-  // Remove the trailing slash and replace /brands with /designers
+  designer ? `/search/designers/${designer}/${slug}` : `/search/${slug}`
-  const designer = path.replace(/^\/brands/, '/designers').replace(/\/$/, '')
-  const href = `/search${designer}`
 
-  return category ? `${href}/${category}` : href
+const getDesignerPath = (slug: string, category?: string) => {
+  const designer = slug.replace(/^brands/, 'designers')
+  return `/search/${designer}${category ? `/${category}` : ''}`
 }

pages/search/designers2/[designer]/[category].tsx

@@ -0,0 +1,96 @@
+import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
+import Link from 'next/link'
+import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
+import useSearch from '@lib/bigcommerce/products/use-search'
+import { Layout } from '@components/core'
+import { Container, Grid } from '@components/ui'
+import { ProductCard } from '@components/product'
+import { useRouter } from 'next/router'
+
+export async function getStaticProps({ preview }: GetStaticPropsContext) {
+  const { categories, brands } = await getSiteInfo()
+
+  return {
+    props: { categories, brands },
+  }
+}
+
+export default function Home({
+  categories,
+  brands,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  const router = useRouter()
+  const { q } = router.query
+  const { data } = useSearch({
+    search: typeof q === 'string' ? q : '',
+  })
+
+  console.log('Q', router.query)
+
+  return (
+    <Container>
+      <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
+        <div className="col-span-2">
+          <ul className="mb-10">
+            <li className="py-1 text-primary font-bold tracking-wide">
+              All Categories
+            </li>
+            {categories.map((cat) => (
+              <li key={cat.path} className="py-1 text-default">
+                <Link href={`/search${cat.path}`}>
+                  <a>{cat.name}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <ul>
+            <li className="py-1 text-primary font-bold tracking-wide">
+              All Designers
+            </li>
+            {brands.flatMap(({ node }) => (
+              <li key={node.path} className="py-1 text-default">
+                <a href="#">{node.name}</a>
+              </li>
+            ))}
+          </ul>
+        </div>
+        <div className="col-span-8">
+          {data ? (
+            <>
+              {q && (
+                <div className="mb-12">
+                  {data.found ? (
+                    <>Showing {data.products.length} results for</>
+                  ) : (
+                    <>There are no products that match</>
+                  )}{' '}
+                  "<strong>{q}</strong>"
+                </div>
+              )}
+              <Grid
+                items={data.products}
+                layout="normal"
+                wrapper={ProductCard}
+              />
+            </>
+          ) : (
+            <div>Searching...</div>
+          )}
+        </div>
+        <div className="col-span-2">
+          <ul>
+            <li className="py-1 text-primary font-bold tracking-wide">
+              Relevance
+            </li>
+            <li className="py-1 text-default">Latest arrivals</li>
+            <li className="py-1 text-default">Trending</li>
+            <li className="py-1 text-default">Price: Low to high</li>
+            <li className="py-1 text-default">Price: High to low</li>
+          </ul>
+        </div>
+      </div>
+    </Container>
+  )
+}
+
+Home.Layout = Layout