diff options
| author | IT Fixcomart <it@fixcomart.co.id> | 2022-11-11 18:02:11 +0700 |
|---|---|---|
| committer | IT Fixcomart <it@fixcomart.co.id> | 2022-11-11 18:02:11 +0700 |
| commit | 8ee5432961a5b73e8e5c42af2eda05621723c9e7 (patch) | |
| tree | 12b7e0628328f6f10f03b464ad0717a729e2ede0 /src/components/Header.js | |
| parent | df04a3504e61f3c1257b5a46310e39c51bf23bea (diff) | |
Connect to solr (search product), header component with title, fix product card layout, show product search result
Diffstat (limited to 'src/components/Header.js')
| -rw-r--r-- | src/components/Header.js | 32 |
1 files changed, 27 insertions, 5 deletions
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> |