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

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",
};