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}>