summaryrefslogtreecommitdiff
path: root/src2/components/layouts/Header.js
diff options
context:
space:
mode:
Diffstat (limited to 'src2/components/layouts/Header.js')
-rw-r--r--src2/components/layouts/Header.js253
1 files changed, 253 insertions, 0 deletions
diff --git a/src2/components/layouts/Header.js b/src2/components/layouts/Header.js
new file mode 100644
index 00000000..23fda642
--- /dev/null
+++ b/src2/components/layouts/Header.js
@@ -0,0 +1,253 @@
+import Image from "next/image";
+import { Fragment, 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,
+ HeartIcon,
+ ChevronDownIcon,
+ ChevronUpIcon
+} from "@heroicons/react/24/outline";
+
+// Helpers
+import { useAuth } from "@/core/utils/auth";
+// Components
+import Link from "../elements/Link";
+// Images
+import Logo from "@/images/logo.png";
+import greeting from "@/core/utils/greeting";
+import apiOdoo from "@/core/utils/apiOdoo";
+
+const menus = [
+ { name: 'Semua Brand', href: '/shop/brands' },
+ { name: 'Blog Indoteknik', href: '/' },
+ { name: 'Tentang Indoteknik', href: '/' },
+ { name: 'Pusat Bantuan', href: '/' },
+];
+
+export default function Header({ title }) {
+ const router = useRouter();
+ const { q = '' } = router.query;
+ const [searchQuery, setSearchQuery] = useState(q != '*' ? 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();
+ }
+ }
+
+ const [ isOpenCategory, setOpenCategory ] = useState(false);
+ const [ categories, setCategories ] = useState([]);
+
+ useEffect(() => {
+ const loadCategories = async () => {
+ if (isOpenCategory && categories.length == 0) {
+ let dataCategories = await apiOdoo('GET', '/api/v1/category/tree');
+ dataCategories = dataCategories.map((category) => {
+ category.childs = category.childs.map((child1Category) => {
+ return {
+ ...child1Category,
+ isOpen: false
+ }
+ })
+ return {
+ ...category,
+ isOpen: false
+ }
+ });
+ setCategories(dataCategories);
+ }
+ }
+ loadCategories();
+ }, [ isOpenCategory, categories ]);
+
+ const toggleCategories = (id = 0) => {
+ let newCategories = categories.map((category) => {
+ category.childs = category.childs.map((child1Category) => {
+ return {
+ ...child1Category,
+ isOpen: id == child1Category.id ? !child1Category.isOpen : child1Category.isOpen
+ }
+ })
+ return {
+ ...category,
+ isOpen: id == category.id ? !category.isOpen : category.isOpen
+ }
+ });
+ setCategories(newCategories);
+ }
+
+ 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 className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4" onClick={() => setOpenCategory(!isOpenCategory)}>
+ <span>Kategori</span>
+ <div className="ml-auto">
+ { !isOpenCategory && <ChevronDownIcon className="text-gray_r-12 w-5" /> }
+ { isOpenCategory && <ChevronUpIcon className="text-gray_r-12 w-5" /> }
+ </div>
+ </div>
+ { isOpenCategory && categories.map((category) => (
+ <Fragment key={category.id}>
+ <div className="flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8">
+ <Link href={`/shop/search?category=${category.name}`} className="flex-1 font-normal text-gray_r-11 py-4">
+ { category.name }
+ </Link>
+ <div className="ml-4 h-full py-4" onClick={() => toggleCategories(category.id)}>
+ { !category.isOpen && <ChevronDownIcon className="text-gray_r-12 w-5" /> }
+ { category.isOpen && <ChevronUpIcon className="text-gray_r-12 w-5" /> }
+ </div>
+ </div>
+ { category.isOpen && category.childs.map((child1Category) => (
+ <Fragment key={child1Category.id}>
+ <div className={`flex w-full text-gray_r-11 border-b border-gray_r-6 p-4 pl-12 ${category.isOpen ? 'bg-gray_r-2' : ''}`}>
+ <Link href={`/shop/search?category=${child1Category.name}`} className="flex-1 font-normal text-gray_r-11">
+ { child1Category.name }
+ </Link>
+ { child1Category.childs.length > 0 && (
+ <div className="ml-4 h-full" onClick={() => toggleCategories(child1Category.id)}>
+ { !child1Category.isOpen && <ChevronDownIcon className="text-gray_r-12 w-5" /> }
+ { child1Category.isOpen && <ChevronUpIcon className="text-gray_r-12 w-5" /> }
+ </div>
+ ) }
+ </div>
+ { child1Category.isOpen && child1Category.childs.map((child2Category) => (
+ <Link key={child2Category.id} href={`/shop/search?category=${child2Category.name}`} className="flex w-full font-normal text-gray_r-11 border-b border-gray_r-6 p-4 pl-16">
+ { child2Category.name }
+ </Link>
+ )) }
+ </Fragment>
+ )) }
+ </Fragment>
+ )) }
+ </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="/my/wishlist">
+ <HeartIcon className="w-6 text-gray_r-12" />
+ </Link>
+ <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
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:52:15 +0000