diff options
Diffstat (limited to 'src/components/Header.js')
| -rw-r--r-- | src/components/Header.js | 164 |
1 files changed, 0 insertions, 164 deletions
diff --git a/src/components/Header.js b/src/components/Header.js deleted file mode 100644 index 71f8fd58..00000000 --- a/src/components/Header.js +++ /dev/null @@ -1,164 +0,0 @@ -import Image from "next/image"; -import { useCallback, useEffect, useRef, useState } from "react"; -import Head from "next/head"; -import { useRouter } from "next/router"; -import axios from "axios"; -import { - MagnifyingGlassIcon, - Bars3Icon, - ShoppingCartIcon, - ChevronRightIcon, - Cog6ToothIcon -} from "@heroicons/react/24/outline"; - -// Helpers -import { useAuth } from "../helpers/auth"; -// Components -import Link from "./Link"; -// Images -import Logo from "../images/logo.png"; -import greeting from "../helpers/greeting"; - -const menus = [ - { name: 'Semua Brand', href: '/shop/brands' }, - { name: 'Blog Indoteknik', href: '/' }, - { name: 'Kategori', href: '/' }, -]; - -export default function Header({ title }) { - const router = useRouter(); - const { q = '' } = router.query; - const [searchQuery, setSearchQuery] = useState(q); - const [suggestions, setSuggestions] = useState([]); - const searchQueryRef = useRef(); - const [isMenuActive, setIsMenuActive] = useState(false); - const [auth] = useAuth(); - - useEffect(() => { - if (q) { - searchQueryRef.current.blur(); - setSuggestions([]); - }; - }, [q]); - - const clickSuggestion = (value) => { - router.push(`/shop/search?q=${value}`, undefined, { scroll: false }); - }; - - const getSuggestion = useCallback(async () => { - if (searchQuery.trim().length > 0) { - let result = await axios(`${process.env.SELF_HOST}/api/shop/suggest?q=${searchQuery.trim()}`); - setSuggestions(result.data.suggest.mySuggester[searchQuery.trim()].suggestions); - } else { - setSuggestions([]); - } - }, [searchQuery]); - - useEffect(() => { - if (document.activeElement == searchQueryRef.current) getSuggestion(); - }, [getSuggestion]); - - const openMenu = () => setIsMenuActive(true); - const closeMenu = () => setIsMenuActive(false); - - const searchSubmit = (e) => { - e.preventDefault(); - if (searchQuery.length > 0) { - router.push(`/shop/search?q=${searchQuery}`, undefined, { scroll: false }); - } else { - searchQueryRef.current.focus(); - } - } - - 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={'menu-wrapper' + (isMenuActive ? ' active ' : '')}> - <div className="flex gap-x-2 items-center border-b border-gray_r-6 p-4"> - { auth && ( - <Link href="/my/menu" className="w-full flex items-center text-gray_r-12" onClick={closeMenu}> - <div> - <p className="text-gray_r-11 text-caption-2">{ greeting() },</p> - <h1>{auth.name}</h1> - </div> - <div className="ml-auto"> - <Cog6ToothIcon className="w-5" /> - </div> - </Link> - ) } - - { !auth && ( - <> - <Link href="/login" onClick={closeMenu} className="w-full py-2 btn-light text-gray_r-12">Masuk</Link> - <Link href="/register" onClick={closeMenu} className="w-full py-2 btn-yellow text-gray_r-12">Daftar</Link> - </> - ) } - </div> - <div className="flex flex-col"> - { menus.map((menu, index) => ( - <Link className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4" href={menu.href} key={index} onClick={closeMenu}> - <span>{ menu.name }</span> - <div className="ml-auto"> - <ChevronRightIcon className="text-gray_r-12 w-5" /> - </div> - </Link> - )) } - </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="/" scroll={false}> - <Image src={Logo} alt="Logo Indoteknik" width={120} height={40} /> - </Link> - <div className="flex gap-x-4"> - <Link href="/shop/cart"> - <ShoppingCartIcon className="w-6 text-gray_r-12" /> - </Link> - <button onClick={openMenu}> - <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: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 && ( - <div className="menu-overlay !z-40" onClick={() => setSuggestions([])}></div> - )} - </> - ) -}
\ No newline at end of file |