diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Header.js | 20 |
1 files changed, 12 insertions, 8 deletions
diff --git a/src/components/Header.js b/src/components/Header.js index ad706fe9..99972307 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -7,7 +7,8 @@ import { MagnifyingGlassIcon, Bars3Icon, ShoppingCartIcon, - ChevronRightIcon + ChevronRightIcon, + Cog6ToothIcon } from "@heroicons/react/24/outline"; // Helpers @@ -16,6 +17,7 @@ import { getAuth, useAuth } from "../helpers/auth"; import Link from "./Link"; // Images import Logo from "../images/logo.png"; +import greeting from "../helpers/greeting"; export default function Header({ title }) { const router = useRouter(); @@ -25,18 +27,17 @@ export default function Header({ title }) { const searchQueryRef = useRef(); const [isMenuActive, setIsMenuActive] = useState(false); const [auth, setAuth] = useAuth(); - + useEffect(() => { if (q) { searchQueryRef.current.blur(); setSuggestions([]); }; - }, [q]) + }, [q]); const clickSuggestion = (value) => { - console.log(value); router.push(`/shop/search?q=${value}`, undefined, { scroll: false }); - } + }; const getSuggestion = useCallback(async () => { if (searchQuery.trim().length > 0) { @@ -73,10 +74,13 @@ export default function Header({ title }) { <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 text-gray_r-12" onClick={closeMenu}> - <h1>Hi, {auth.name}</h1> + <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"> - <ChevronRightIcon className="w-5" /> + <Cog6ToothIcon className="w-5" /> </div> </Link> ) } |
