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 ( <> {title}

{ auth && (

{ greeting() },

{auth.name}

) } { !auth && ( <> Masuk Daftar ) }

{ menus.map((menu, index) => ( { menu.name }

)) }

{suggestions.length > 1 && (

setSuggestions([])}>

)} ) }