update src/components/SearchBox/index.js

master
mahdi 2 years ago
parent 3ca0c3fa37
commit 84b798680d
  1. 20
      src/components/SearchBox/index.js

@ -3,15 +3,7 @@ import React, { useState } from "react";
import search from "./search-normal.svg"; import search from "./search-normal.svg";
import zarbedar from "./zarbedar-icon.svg"; import zarbedar from "./zarbedar-icon.svg";
const SearchBox = ({ const SearchBox = ({ cancleIcon, searchIcon, placeholder, className }) => {
cancleIcon,
searchIcon,
borderClr,
backgroundColor,
inputWidth,
placeHolderColor,
placeholder,
}) => {
const [activeSearchBox, setActiveSearchBox] = useState(false); const [activeSearchBox, setActiveSearchBox] = useState(false);
return ( return (
<div className={`flex flex-row-reverse items-center relative ml-2`}> <div className={`flex flex-row-reverse items-center relative ml-2`}>
@ -35,12 +27,7 @@ const SearchBox = ({
// onBlur={() => setActiveSearchBox(false)} // onBlur={() => setActiveSearchBox(false)}
type="text" type="text"
placeholder={placeholder} placeholder={placeholder}
className={``} className={`${className} focus:outline-none border border-[#B5D6FF] focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20`}
style={{
backgroundColor: backgroundColor,
borderColor: borderClr,
width: inputWidth,
}}
/> />
</div> </div>
); );
@ -51,8 +38,9 @@ export default SearchBox;
SearchBox.defaultProps = { SearchBox.defaultProps = {
cancleIcon: zarbedar, cancleIcon: zarbedar,
searchIcon: search, searchIcon: search,
placeholder: "دنبال چه چیزی هستید", placeholder: "دنبال چه چیزی هستید",
className: className:
"w-[15%] text-xs text-blue-400 bg-[#F9FBFF] rounded placeholder-blue-300 focus:outline-none border border-[#B5D6FF] focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20", "w-[15%] text-xs text-blue-400 bg-[#F9FBFF] rounded placeholder-blue-300",
}; };

Loading…
Cancel
Save