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 (
{activeSearchBox && ( setActiveSearchBox(false)} /> )} {searchIcon && ( )} 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`} />
); }; 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", };