diff options
Diffstat (limited to 'src/components/Header.js')
| -rw-r--r-- | src/components/Header.js | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/src/components/Header.js b/src/components/Header.js new file mode 100644 index 00000000..3d5d0f84 --- /dev/null +++ b/src/components/Header.js @@ -0,0 +1,69 @@ +import Image from "next/image"; +import Link from "next/link"; +import ShoppingCartIcon from "../icons/shopping-cart.svg"; +import SearchIcon from "../icons/search.svg"; +import MenuIcon from "../icons/menu.svg"; +import ChevronRightIcon from "../icons/chevron-right.svg"; +import { useState } from "react"; + + +export default function Header() { + const [isMenuActive, setIsMenuActive] = useState(false); + + const openMenu = () => setIsMenuActive(true); + const closeMenu = () => setIsMenuActive(false); + + return ( + <> + <div className={isMenuActive ? 'menu-wrapper active' : 'menu-wrapper'}> + <div className="flex gap-x-2 items-center"> + <Link href="/login" className="w-full py-2 btn-light">Masuk</Link> + <Link href="/register" className="w-full py-2 btn-primary">Daftar</Link> + </div> + <div className="flex flex-col gap-y-4 mt-5"> + <Link className="flex w-full font-normal text-gray-800" href="/shop/brands"> + <span>Brand</span> + <div className="ml-auto"> + <ChevronRightIcon className="stroke-gray-700" /> + </div> + </Link> + <Link className="flex w-full font-normal text-gray-800" href="/blog"> + <span>Blog</span> + <div className="ml-auto"> + <ChevronRightIcon className="stroke-gray-700" /> + </div> + </Link> + <button className="flex w-full font-normal text-gray-800" id="open_category_parent_menu"> + <span>Kategori</span> + <div className="ml-auto"> + <ChevronRightIcon className="stroke-gray-700" /> + </div> + </button> + </div> + </div> + <div className={isMenuActive ? 'menu-overlay block opacity-100' : 'menu-overlay hidden opacity-0'} onClick={closeMenu}></div> + + <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} /> + </Link> + <div className="flex gap-4"> + <Link href="/shop/cart"> + <ShoppingCartIcon className="w-6" /> + </Link> + <button onClick={openMenu}> + <MenuIcon className="w-6" /> + </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"> + <SearchIcon /> + </button> + </form> + </div> + </> + ) +}
\ No newline at end of file |