update src/components/SearchBox/index.js

src/components/SearchBox/index.js

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