summaryrefslogtreecommitdiff
path: root/src/core/components/elements/Navbar/Search.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/core/components/elements/Navbar/Search.jsx')
-rw-r--r--src/core/components/elements/Navbar/Search.jsx56
1 files changed, 27 insertions, 29 deletions
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index cca1a97c..6f0e4dd9 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -1,22 +1,22 @@
-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"
+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([])
+ 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 () => {
+ ;(async () => {
const dataSuggestion = await searchSuggestApi({ query })
setSuggestions(dataSuggestion.data.suggestions)
})()
@@ -24,7 +24,7 @@ const Search = () => {
} else {
setSuggestions([])
}
- }, [ query ])
+ }, [query])
useEffect(() => {
if (query && document.activeElement == queryRef.current) {
@@ -32,7 +32,7 @@ const Search = () => {
} else {
setSuggestions([])
}
- }, [ loadSuggestion, query ])
+ }, [loadSuggestion, query])
const handleSubmit = (e) => {
e.preventDefault()
@@ -50,40 +50,38 @@ const Search = () => {
}
return (
- <form
- onSubmit={handleSubmit}
- className="flex relative"
- >
- <input
- type="text"
+ <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"
+ 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 type='submit' className='rounded-r border border-l-0 border-gray_r-6 px-2'>
+ <MagnifyingGlassIcon className='w-6' />
</button>
- { suggestions.length > 1 && (
+ {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">
+ <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">
+ <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
+export default Search