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 { 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"; export default function Header({ title }) { const router = useRouter(); const { q = '' } = router.query; const [searchQuery, setSearchQuery] = useState(q); const searchQueryRef = useRef(); const [isMenuActive, setIsMenuActive] = useState(false); const [auth, setAuth] = useState(); useEffect(() => { if (!auth) setAuth(getAuth()) }, [auth]); useEffect(() => { if (q) searchQueryRef.current.blur(); }, [q]) const openMenu = () => setIsMenuActive(true); const closeMenu = () => setIsMenuActive(false); const searchSubmit = (e) => { e.preventDefault(); router.push(`/shop/search?q=${searchQuery}`, undefined, { scroll: false }); } return ( <> {title}

{auth ? (

Hi, {auth.name}

) : ( <> Masuk Daftar )}

{auth ? ( Profil Saya

) : ''} Semua Brand

Blog Indoteknik

) }