diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
| commit | f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c (patch) | |
| tree | 253dcf854a3c92e09ca846e86a09e5b4c5d16be1 /src/core/components/elements/Navbar/Search.jsx | |
| parent | 3c559031623649a67825ff47f34512f0eb946861 (diff) | |
prettier
Diffstat (limited to 'src/core/components/elements/Navbar/Search.jsx')
| -rw-r--r-- | src/core/components/elements/Navbar/Search.jsx | 56 |
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 |
