You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.4 KiB
88 lines
2.4 KiB
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: ["علی", "علیرضا", "محمد", "محمدرضا"], |
|
};
|
|
|