Prefetch Search

components/core/Searchbar/Searchbar.tsx

@@ -1,13 +1,14 @@
 import cn from 'classnames'
 import { FC } from 'react'
 import s from './Searchbar.module.css'
-
+import { useRouter } from 'next/router'
 interface Props {
   className?: string
   children?: any
 }
 
 const Searchbar: FC<Props> = ({ className }) => {
+  const router = useRouter()
   return (
     <div
       className={cn(
@@ -15,7 +16,15 @@ const Searchbar: FC<Props> = ({ className }) => {
         className
       )}
     >
-      <input className={s.input} placeholder="Search for products..." />
+      <input
+        className={s.input}
+        placeholder="Search for products..."
+        onChange={(e) => {
+          e.preventDefault()
+          router.push('/search')
+          console.log('changing')
+        }}
+      />
       <div className={s.iconContainer}>
         <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
           <path

components/product/ProductView/ProductView.tsx

@@ -46,7 +46,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
   return (
     <div className={cn(s.root, className)}>
       <div className="absolute">
-        <h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
+        <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
           {product.name}
         </h1>
         <div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
@@ -102,7 +102,10 @@ const ProductView: FC<Props> = ({ product, className }) => {
           </div>
         </section>
         <section className="pb-12">
-          <div dangerouslySetInnerHTML={{ __html: product.description }} />
+          <div
+            className="break-words"
+            dangerouslySetInnerHTML={{ __html: product.description }}
+          />
         </section>
         <section className="pb-4">
           <Button type="button" className={s.button} onClick={addToCart}>

pages/index.tsx

@@ -4,6 +4,8 @@ import { Layout } from '@components/core'
 import { Grid, Marquee, Hero } from '@components/ui'
 import { ProductCard } from '@components/product'
 import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { products } = await getAllProducts()
@@ -19,6 +21,12 @@ export default function Home({
   categories,
   brands,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.prefetch('/search')
+  }, [])
+
   return (
     <div className="mt-3">
       <Grid items={products.slice(0, 3)} wrapper={ProductCard} />
@@ -44,22 +52,22 @@ export default function Home({
       />
       <div className="py-12 flex flex-row w-full">
         <div className="pr-3 w-48">
-          <ul className="uppercase">
+          <ul className="mb-10">
-            <li>
+            <li className="py-1 text-black font-bold tracking-wide">
-              <h2 className="font-bold">All Categories</h2>
+              All Categories
             </li>
             {categories.map((cat) => (
-              <li key={cat.path} className="mt-2">
+              <li key={cat.path} className="py-1 text-gray-800">
                 <a href="#">{cat.name}</a>
               </li>
             ))}
           </ul>
-          <ul className="uppercase mt-6">
+          <ul className="">
-            <li>
+            <li className="py-1 text-black font-bold tracking-wide">
-              <h2 className="font-bold">All Designers</h2>
+              All Designers
             </li>
             {brands.flatMap(({ node }) => (
-              <li key={node.path} className="mt-2">
+              <li key={node.path} className="py-1 text-gray-800">
                 <a href="#">{node.name}</a>
               </li>
             ))}