diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Filter.js | 6 | ||||
| -rw-r--r-- | src/components/Header.js | 41 |
2 files changed, 41 insertions, 6 deletions
diff --git a/src/components/Filter.js b/src/components/Filter.js index a07beff3..fd9387d7 100644 --- a/src/components/Filter.js +++ b/src/components/Filter.js @@ -62,7 +62,7 @@ const Filter = ({ } return ( - <div className={`fixed w-full z-[60] py-8 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}> + <div className={`fixed w-full z-[60] py-6 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}> <div className="flex justify-between items-center mb-5"> <h2 className="text-xl font-semibold">Filter Produk</h2> <button onClick={closeFilter}> @@ -92,11 +92,11 @@ const Filter = ({ <label>Harga</label> <div className="flex gap-x-4 mt-2 items-center"> <input className="form-input" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/> - <span>-</span> + <span>—</span> <input className="form-input" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/> </div> </div> - <button type="submit" className="btn-yellow font-semibold mt-4 w-full"> + <button type="submit" className="btn-yellow font-semibold mt-2 w-full"> Terapkan Filter </button> {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 ? ( diff --git a/src/components/Header.js b/src/components/Header.js index 2a33df63..e3d8d41d 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -4,17 +4,19 @@ import ShoppingCartIcon from "../icons/shopping-cart.svg"; import SearchIcon from "../icons/search.svg"; import MenuIcon from "../icons/menu.svg"; import ChevronRightIcon from "../icons/chevron-right.svg"; -import { useEffect, useRef, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import Head from "next/head"; import Logo from "../images/logo.png"; import { useRouter } from "next/router"; import { getAuth } from "../helpers/auth"; +import axios from "axios"; export default function Header({ title }) { const router = useRouter(); const { q = '' } = router.query; const [searchQuery, setSearchQuery] = useState(q); + const [suggestions, setSuggestions] = useState([]); const searchQueryRef = useRef(); const [isMenuActive, setIsMenuActive] = useState(false); const [auth, setAuth] = useState(); @@ -24,9 +26,30 @@ export default function Header({ title }) { }, [auth]); useEffect(() => { - if (q) searchQueryRef.current.blur(); + if (q) { + searchQueryRef.current.blur(); + setSuggestions([]); + }; }, [q]) + const clickSuggestion = (value) => { + console.log(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); @@ -101,15 +124,17 @@ export default function Header({ title }) { </button> </div> </div> - <form onSubmit={searchSubmit} className="flex mt-2"> + <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:ring-0" placeholder="Ketikan nama, merek, part number" + autoComplete="false" /> <button type="submit" @@ -118,8 +143,18 @@ export default function Header({ title }) { > <SearchIcon /> </button> + {suggestions.length > 1 ? ( + <div className="absolute w-full top-[50px] rounded-b bg-white border border-gray-200"> + {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="fixed top-0 left-0 w-full h-full bg-gray-900/60 z-40" onClick={() => setSuggestions([])}></div> + ) : ''} </> ) }
\ No newline at end of file |