Search functionality

components/core/Searchbar/Searchbar.tsx

@@ -19,10 +19,15 @@ const Searchbar: FC<Props> = ({ className }) => {
       <input
         className={s.input}
         placeholder="Search for products..."
-        onChange={(e) => {
+        onKeyUp={(e) => {
           e.preventDefault()
-          router.push('/search')
+
-          console.log('changing')
+          if (e.key === 'Enter') {
+            router.push({
+              pathname: `/search`,
+              query: { q: e.currentTarget.value },
+            })
+          }
         }}
       />
       <div className={s.iconContainer}>

pages/search.tsx

@@ -4,6 +4,7 @@ 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 { useRouter } from 'next/router'
 
 export async function getStaticProps({ preview }: GetStaticPropsContext) {
   const { products } = await getAllProducts()
@@ -19,6 +20,7 @@ export default function Home({
   categories,
   brands,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
+  const router = useRouter()
   return (
     <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
       <div className="col-span-2">
@@ -45,7 +47,7 @@ export default function Home({
       </div>
       <div className="col-span-8">
         <div className="mb-12">
-          Showing 8 results for "<strong>Jacket</strong>"
+          Showing 8 results for "<strong>{router.query.q}</strong>"
         </div>
         <Grid
           items={[