diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Header.js | 32 | ||||
| -rw-r--r-- | src/components/ProductCard.js | 18 |
2 files changed, 39 insertions, 11 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> diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js index 360e11ff..49bba235 100644 --- a/src/components/ProductCard.js +++ b/src/components/ProductCard.js @@ -24,19 +24,25 @@ export default function ProductCard({ data }) { {product.name} </Link> </div> - <div> + <div className="flex-1 mt-2"> {product.lowest_price.discount_percentage > 0 ? ( - <div className="flex gap-x-1 items-center mt-2"> + <div className="flex gap-x-1 items-center"> <span className="badge-yellow">{product.lowest_price.discount_percentage}%</span> <p className="text-xs text-gray-800 line-through">{currencyFormat(product.lowest_price.price)}</p> </div> ) : ''} - <p className="text-sm text-gray-900 font-semibold">{product.lowest_price.price_discount > 0 ? currencyFormat(product.lowest_price.price_discount) : 'Tanya harga'}</p> - {product.stock_total > 0 ? ( - <div className="badge-yellow bg-green-200 text-green-700 w-fit mt-2">Ready Stock</div> + {product.lowest_price.price_discount > 0 ? ( + <p className="text-sm text-gray-900 font-semibold"> + {currencyFormat(product.lowest_price.price_discount)} + </p> ) : ( - <div className="h-6"></div> + <a href="https://wa.me" className="py-2 rounded block text-sm border border-yellow-900 text-center"> + Tanya Harga + </a> )} + {product.stock_total > 0 ? ( + <div className="badge-yellow bg-green-200 text-green-700 w-fit mt-2">Ready Stock</div> + ) : ''} </div> </div> </div> |