summaryrefslogtreecommitdiff
path: root/src/core/components/elements/NavBar
diff options
context:
space:
mode:
Diffstat (limited to 'src/core/components/elements/NavBar')
-rw-r--r--src/core/components/elements/NavBar/NavBar.jsx31
-rw-r--r--src/core/components/elements/NavBar/Search.jsx89
2 files changed, 0 insertions, 120 deletions
diff --git a/src/core/components/elements/NavBar/NavBar.jsx b/src/core/components/elements/NavBar/NavBar.jsx
deleted file mode 100644
index 212fd341..00000000
--- a/src/core/components/elements/NavBar/NavBar.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import Image from "next/image"
-import IndoteknikLogo from "@/images/logo.png"
-import { Bars3Icon, HeartIcon, ShoppingCartIcon } from "@heroicons/react/24/outline"
-import Link from "../Link/Link"
-import Search from "./Search"
-
-const NavBar = () => {
- return (
- <nav className="px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow">
- <div className="flex justify-between items-center mb-2">
- <Link href="/">
- <Image src={IndoteknikLogo} alt="Indoteknik Logo" width={120} height={40} />
- </Link>
- <div className="flex gap-x-3">
- <button type="button">
- <HeartIcon className="w-6 text-gray_r-12" />
- </button>
- <Link href="/shop/cart">
- <ShoppingCartIcon className="w-6 text-gray_r-12" />
- </Link>
- <button type="button">
- <Bars3Icon className="w-6 text-gray_r-12" />
- </button>
- </div>
- </div>
- <Search />
- </nav>
- )
-}
-
-export default NavBar \ No newline at end of file
diff --git a/src/core/components/elements/NavBar/Search.jsx b/src/core/components/elements/NavBar/Search.jsx
deleted file mode 100644
index cca1a97c..00000000
--- a/src/core/components/elements/NavBar/Search.jsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import searchSuggestApi from "@/core/api/searchSuggestApi"
-import { MagnifyingGlassIcon } from "@heroicons/react/24/outline"
-import { useCallback, useEffect, useRef, useState } from "react"
-import Link from "../Link/Link"
-import { useRouter } from "next/router"
-
-const Search = () => {
- const router = useRouter()
- const queryRef = useRef()
- const [ query, setQuery ] = useState('')
- const [ suggestions, setSuggestions ] = useState([])
-
- useEffect(() => {
- setQuery(router.query.q)
- }, [router.query])
-
- const loadSuggestion = useCallback(() => {
- if (query && document.activeElement == queryRef.current) {
- (async () => {
- const dataSuggestion = await searchSuggestApi({ query })
- setSuggestions(dataSuggestion.data.suggestions)
- })()
- return
- } else {
- setSuggestions([])
- }
- }, [ query ])
-
- useEffect(() => {
- if (query && document.activeElement == queryRef.current) {
- loadSuggestion()
- } else {
- setSuggestions([])
- }
- }, [ loadSuggestion, query ])
-
- const handleSubmit = (e) => {
- e.preventDefault()
- if (query) {
- router.push(`/shop/search?q=${query}`)
- } else {
- queryRef.current.focus()
- }
- }
-
- const onInputBlur = () => {
- setTimeout(() => {
- setSuggestions([])
- }, 100)
- }
-
- return (
- <form
- onSubmit={handleSubmit}
- className="flex relative"
- >
- <input
- type="text"
- ref={queryRef}
- className="form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6"
- placeholder="Ketik nama, part number, merk"
- value={query}
- onChange={(e) => setQuery(e.target.value)}
- onBlur={onInputBlur}
- onFocus={loadSuggestion}
- />
- <button
- type="submit"
- className="rounded-r border border-l-0 border-gray_r-6 px-2"
- >
- <MagnifyingGlassIcon className="w-6" />
- </button>
-
- { suggestions.length > 1 && (
- <>
- <div className="absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6">
- {suggestions.map((suggestion, index) => (
- <Link href={`/shop/search?q=${suggestion.term}`} key={index} className="px-3 py-3 !text-gray_r-12 font-normal">
- {suggestion.term}
- </Link>
- ))}
- </div>
- </>
- ) }
- </form>
- )
-}
-
-export default Search \ No newline at end of file