import React, { useState } from "react"; import _ from "lodash"; import searchIcon from "./search.png"; const langDetector = (lang, option1, option2) => { return lang === "fa" ? option1 : option2; }; export default function PopularSearch(props) { const [value, setValue] = useState(""); const [popularsToggle, setPopularsToggle] = useState(false); const { lang, theme, populars } = props; const onChange = (val) => { setValue(val); }; return ( <div className={_.join( ["flex flex-col relative search my-2", langDetector(lang, "fa", "en")], " " )} > <input type="search" className="transition py-2 pr-4 pl-2 mx-0 border rounded-md outline-none focus:ring-1 placeholder-gray-500 placeholder-opacity-40 focus:placeholder-blue-300" onChange={(e) => onChange(e.target.value)} value={value} placeholder={langDetector( lang, "نام کالا را جستجو کنید", "search product name" )} onFocus={() => setPopularsToggle(true)} onBlur={() => setTimeout(() => { setPopularsToggle(false); }, 250) } /> <img src={searchIcon} alt={langDetector(lang, "جستجو", "search")} className={_.join( [ "search__icon absolute w-6 h-6 top-1/2 transform -translate-y-1/2", langDetector(lang, "left-3", "right-3"), ], " " )} /> <div className={_.join( [ "search__populars w-full mt-0 border rounded-md top-12 left-0 absolute z-10 px-4 bg-white", popularsToggle ? "flex flex-col" : "hidden", "transition", ], " " )} > <strong className="py-3"> {langDetector(lang, "جستجوهای پرطرفدار", "Popular search")} </strong> <ul className="divide-y divide-gray-200"> {populars?.map((item, i) => ( <> <li key={i} className="transition py-3 px-1 hover:bg-blue-100" onClick={() => setValue(() => item)} > {item} </li> </> ))} </ul> </div> </div> ); } PopularSearch.defaultProps = { lang: "fa", theme: "light", populars: ["علی", "علیرضا", "محمد", "محمدرضا"], };