From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 17 Feb 2023 17:07:50 +0700 Subject: Refactor --- src2/components/layouts/AppBar.js | 47 +++++++ src2/components/layouts/Footer.js | 91 ++++++++++++++ src2/components/layouts/Header.js | 253 ++++++++++++++++++++++++++++++++++++++ src2/components/layouts/Layout.js | 20 +++ 4 files changed, 411 insertions(+) create mode 100644 src2/components/layouts/AppBar.js create mode 100644 src2/components/layouts/Footer.js create mode 100644 src2/components/layouts/Header.js create mode 100644 src2/components/layouts/Layout.js (limited to 'src2/components/layouts') diff --git a/src2/components/layouts/AppBar.js b/src2/components/layouts/AppBar.js new file mode 100644 index 00000000..fe74c940 --- /dev/null +++ b/src2/components/layouts/AppBar.js @@ -0,0 +1,47 @@ +import { Bars3Icon, ChevronLeftIcon, HomeIcon, ShoppingCartIcon } from "@heroicons/react/24/outline"; +import Head from "next/head"; +import { useRouter } from "next/router"; +import Link from "../elements/Link"; + +const AppBar = ({ title }) => { + const router = useRouter(); + + const handleBackButtonClick = (event) => { + event.currentTarget.disabled = true; + router.back(); + } + + return ( + <> + + { title } - Indoteknik + +
+ {/* --- Start Title */} +
+ +

{ title }

+
+ {/* --- End Title */} + + {/* --- Start Icons */} +
+ + + + + + + + + +
+ {/* --- End Icons */} +
+ + ); +}; + +export default AppBar; \ No newline at end of file diff --git a/src2/components/layouts/Footer.js b/src2/components/layouts/Footer.js new file mode 100644 index 00000000..d173a525 --- /dev/null +++ b/src2/components/layouts/Footer.js @@ -0,0 +1,91 @@ +import { + PhoneIcon, + DevicePhoneMobileIcon, + EnvelopeIcon +} from "@heroicons/react/24/outline"; +import Image from "next/image"; +import InstagramIcon from "@/icons/instagram.svg"; +import LinkedinIcon from "@/icons/linkedin.svg"; +import Link from "../elements/Link"; + +export default function Footer() { + return ( +
+
+
+

Kantor Pusat

+

+ Jl. Bandengan Utara 85A No. 8-9 RT.3/RW.16, Penjaringan, Kec. Penjaringan +

+ +

Layanan Informasi

+
+ + + (021) 2933-8828 + + {'/'} + + 29 + +
+
+ + + 0812-8080-622 + +
+
+ + + sales@indoteknik.com + +
+ +

Panduan Pelanggan

+
+ FAQ + Kebijakan Privasi + Pengajuan Tempo + Garansi Produk + Online Quotation + Pengiriman + Pembayaran + Syarat & Ketentuan + +
+
+
+

Jam Operasional

+

+ Senin - Jumat: 08:30 - 17:00 +

+

+ Sabtu: 08:30 - 14:00 +

+ +

Temukan Kami

+
+ + +
+ +

Pembayaran

+
+ BCA Payment + BCA Payment + BCA Payment + BCA Payment + BCA Payment + BCA Payment + BCA Payment + BCA Payment +
+ + {/*

Pengiriman

*/} +
+
+
PT. Indoteknik Dotcom Gemilang
+
+ ); +} \ No newline at end of file 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 ( + <> + + + {title} + + +
+
+ { auth && ( + +
+

{ greeting() },

+

{auth.name}

+
+
+ +
+ + ) } + + { !auth && ( + <> + Masuk + Daftar + + ) } +
+
+ { menus.map((menu, index) => ( + + { menu.name } +
+ +
+ + )) } +
setOpenCategory(!isOpenCategory)}> + Kategori +
+ { !isOpenCategory && } + { isOpenCategory && } +
+
+ { isOpenCategory && categories.map((category) => ( + +
+ + { category.name } + +
toggleCategories(category.id)}> + { !category.isOpen && } + { category.isOpen && } +
+
+ { category.isOpen && category.childs.map((child1Category) => ( + +
+ + { child1Category.name } + + { child1Category.childs.length > 0 && ( +
toggleCategories(child1Category.id)}> + { !child1Category.isOpen && } + { child1Category.isOpen && } +
+ ) } +
+ { child1Category.isOpen && child1Category.childs.map((child2Category) => ( + + { child2Category.name } + + )) } + + )) } + + )) } +
+
+ + +
+
+ + Logo Indoteknik + +
+ + + + + + + +
+
+
+ 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" + /> + + + + {suggestions.length > 1 && ( +
+ {suggestions.map((suggestion, index) => ( +

clickSuggestion(suggestion.term)} className="w-full p-2" key={index}>{suggestion.term}

+ ))} +
+ )} +
+
+ + {suggestions.length > 1 && ( +
setSuggestions([])}>
+ )} + + ) +} \ No newline at end of file diff --git a/src2/components/layouts/Layout.js b/src2/components/layouts/Layout.js new file mode 100644 index 00000000..fd507963 --- /dev/null +++ b/src2/components/layouts/Layout.js @@ -0,0 +1,20 @@ +import { motion } from 'framer-motion'; + +export default function Layout({ children, ...pageProps }) { + const transition = { + ease: 'easeOut', + duration: 0.3 + }; + + return children && ( + + {children} + + ); +} \ No newline at end of file -- cgit v1.2.3