From 8ee5432961a5b73e8e5c42af2eda05621723c9e7 Mon Sep 17 00:00:00 2001
From: IT Fixcomart <it@fixcomart.co.id>
Date: Fri, 11 Nov 2022 18:02:11 +0700
Subject: Connect to solr (search product), header component with title, fix
 product card layout, show product search result

---
 src/components/Header.js | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

(limited to 'src/components/Header.js')
diff --git a/src/components/Header.js b/src/components/Header.js
index 3814ed20..f7607a18 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -6,18 +6,29 @@ import MenuIcon from "../icons/menu.svg";
 import ChevronRightIcon from "../icons/chevron-right.svg";
 import { useState } from "react";
 import Head from "next/head";
+import Logo from "../images/logo.png";
+import { useRouter } from "next/router";
 
 
-export default function Header() {
+export default function Header({ title }) {
+  const router = useRouter();
+  const { q = '' } = router.query;
+  const [searchQuery, setSearchQuery] = useState(q);
   const [isMenuActive, setIsMenuActive] = useState(false);
 
   const openMenu = () => setIsMenuActive(true);
   const closeMenu = () => setIsMenuActive(false);
 
+  const searchSubmit = (e) => {
+    e.preventDefault();
+    router.push(`/shop/search?q=${searchQuery}`);
+  }
+
   return (
     <>
       <Head>
         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+        <title>{title}</title>
       </Head>
       <div className={isMenuActive ? 'menu-wrapper active' : 'menu-wrapper'}>
         <div className="flex gap-x-2 items-center">
@@ -50,7 +61,7 @@ export default function Header() {
       <div className="sticky-header">
         <div className="flex justify-between items-center">
           <Link href="/">
-            <Image src="/images/logo.png" alt="Logo Indoteknik" width={120} height={40} />
+            <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} className="w-auto" />
           </Link>
           <div className="flex gap-4">
             <Link href="/shop/cart">
@@ -61,9 +72,20 @@ export default function Header() {
             </button>
           </div>
         </div>
-        <form action="" method="GET" className="flex mt-2">
-            <input type="text" name="product_name" className="form-input rounded-r-none border-r-0 focus:outline-none" placeholder="Ketikan nama, merek, part number"/>
-            <button type="submit" aria-label="search" className="btn-light bg-transparent px-2 py-1 rounded-l-none border-l-0">
+        <form onSubmit={searchSubmit} className="flex mt-2">
+            <input 
+              type="text" 
+              name="q" 
+              onChange={(e) => setSearchQuery(e.target.value)} 
+              value={searchQuery} 
+              className="form-input rounded-r-none border-r-0 focus:outline-none" 
+              placeholder="Ketikan nama, merek, part number"
+            />
+            <button 
+              type="submit" 
+              aria-label="search" 
+              className="btn-light bg-transparent px-2 py-1 rounded-l-none border-l-0"
+            >
               <SearchIcon />
             </button>
         </form>
-- 
cgit v1.2.3

