diff options
Diffstat (limited to 'src/components/Header.js')
| -rw-r--r-- | src/components/Header.js | 102 |
1 files changed, 55 insertions, 47 deletions
diff --git a/src/components/Header.js b/src/components/Header.js index ab45eaf6..ca59701e 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,16 +1,21 @@ import Image from "next/image"; -import Link from "./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 { useCallback, useEffect, useRef, useState } from "react"; import Head from "next/head"; -import Logo from "../images/logo.png"; import { useRouter } from "next/router"; -import { getAuth } from "../helpers/auth"; import axios from "axios"; +import { + MagnifyingGlassIcon, + Bars3Icon, + ShoppingCartIcon, + ChevronRightIcon +} from "@heroicons/react/24/outline"; +// Helpers +import { getAuth } from "../helpers/auth"; +// Components +import Link from "./Link"; +// Images +import Logo from "../images/logo.png"; export default function Header({ title }) { const router = useRouter(); @@ -81,30 +86,30 @@ export default function Header({ title }) { )} </div> <div className="flex flex-col"> - {auth ? ( - <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}> + {auth && ( + <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}> <span>Profil Saya</span> <div className="ml-auto"> - <ChevronRightIcon className="stroke-gray-700 w-5 h-5" /> + <ChevronRightIcon className="text-gray_r-12 w-5" /> </div> </Link> - ) : ''} - <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}> + )} + <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/shop/brands" onClick={closeMenu}> <span>Semua Brand</span> <div className="ml-auto"> - <ChevronRightIcon className="stroke-gray-700 w-5 h-5" /> + <ChevronRightIcon className="text-gray_r-12 w-5" /> </div> </Link> - <Link className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" href="/blog" onClick={closeMenu}> + <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" href="/blog" onClick={closeMenu}> <span>Blog Indoteknik</span> <div className="ml-auto"> - <ChevronRightIcon className="stroke-gray-700 w-5 h-5" /> + <ChevronRightIcon className="text-gray_r-12 w-5" /> </div> </Link> - <button className="flex w-full font-normal text-gray-800 border-b border-gray_r-6 p-4 py-3" onClick={closeMenu}> + <button className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 py-3" onClick={closeMenu}> <span>Kategori</span> <div className="ml-auto"> - <ChevronRightIcon className="stroke-gray-700 w-5 h-5" /> + <ChevronRightIcon className="text-gray_r-12 w-5" /> </div> </button> </div> @@ -116,46 +121,49 @@ export default function Header({ title }) { <Link href="/" scroll={false}> <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} /> </Link> - <div className="flex gap-4"> + <div className="flex gap-x-4"> <Link href="/shop/cart"> - <ShoppingCartIcon className="w-6 stroke-gray-900" /> + <ShoppingCartIcon className="w-6 text-gray_r-12" /> </Link> <button onClick={openMenu}> - <MenuIcon className="w-6 stroke-gray-900" /> + <Bars3Icon className="w-6 text-gray_r-12" /> </button> </div> </div> <form onSubmit={searchSubmit} className="relative flex mt-2"> - <input - ref={searchQueryRef} - type="text" - name="q" - onChange={(e) => setSearchQuery(e.target.value)} - onFocus={getSuggestion} - value={searchQuery} - className="form-input rounded-r-none border-r-0 focus:ring-0" - placeholder="Ketikan nama, merek, part number" - autoComplete="off" - /> - <button - type="submit" - aria-label="search" - className="btn-light bg-transparent px-2 py-1 rounded-l-none border-l-0" - > - <SearchIcon /> - </button> - {suggestions.length > 1 ? ( - <div className="absolute w-full top-[50px] rounded-b bg-gray_r-2 border border-gray_r-6"> - {suggestions.map((suggestion, index) => ( - <p onClick={() => clickSuggestion(suggestion.term)} className="w-full p-2" key={index}>{suggestion.term}</p> - ))} - </div> - ) : ''} + <input + ref={searchQueryRef} + type="text" + name="q" + onChange={(e) => setSearchQuery(e.target.value)} + onFocus={getSuggestion} + value={searchQuery} + className="form-input rounded-r-none border-r-0 focus:border-gray_r-7" + placeholder="Ketikan nama, merek, part number" + autoComplete="off" + /> + + <button + type="submit" + aria-label="search" + className="btn-light bg-transparent px-2 py-1 rounded-l-none border-l-0" + > + <MagnifyingGlassIcon className="w-6" /> + </button> + + {suggestions.length > 1 && ( + <div className="absolute w-full top-[50px] rounded-b bg-gray_r-2 border border-gray_r-6"> + {suggestions.map((suggestion, index) => ( + <p onClick={() => clickSuggestion(suggestion.term)} className="w-full p-2" key={index}>{suggestion.term}</p> + ))} + </div> + )} </form> </div> - {suggestions.length > 1 ? ( + + {suggestions.length > 1 && ( <div className="menu-overlay !z-40" onClick={() => setSuggestions([])}></div> - ) : ''} + )} </> ) }
\ No newline at end of file |