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.
46 lines
1.3 KiB
46 lines
1.3 KiB
import React, { useState } from "react"; |
|
|
|
import search from "./search-normal.svg"; |
|
import zarbedar from "./zarbedar-icon.svg"; |
|
|
|
const SearchBox = ({ cancleIcon, searchIcon, placeholder, className }) => { |
|
const [activeSearchBox, setActiveSearchBox] = useState(false); |
|
return ( |
|
<div className={`flex flex-row-reverse items-center relative`}> |
|
{activeSearchBox && ( |
|
<img |
|
src={cancleIcon} |
|
alt="" |
|
className="w-3 h-3 absolute left-7 cursor-pointer" |
|
onClick={() => setActiveSearchBox(false)} |
|
/> |
|
)} |
|
{searchIcon && ( |
|
<img |
|
src={searchIcon} |
|
alt="" |
|
className="w-4 h-4 absolute left-2 cursor-pointer" |
|
/> |
|
)} |
|
<input |
|
onFocus={() => setActiveSearchBox(true)} |
|
// onBlur={() => setActiveSearchBox(false)} |
|
type="text" |
|
placeholder={placeholder} |
|
className={`${className} w-[100%] text-xs focus:outline-none rounded border focus:ring focus:ring-opacity-20`} |
|
/> |
|
</div> |
|
); |
|
}; |
|
|
|
export default SearchBox; |
|
|
|
SearchBox.defaultProps = { |
|
cancleIcon: zarbedar, |
|
searchIcon: search, |
|
|
|
placeholder: "دنبال چه چیزی هستید", |
|
|
|
className: |
|
"text-blue-400 bg-[#F9FBFF] placeholder-blue-300 border-[#B5D6FF] focus:border-blue-200 focus:ring-blue-200", |
|
};
|
|
|