update App.js, src/components/CardDesign3/index.js and src/components/SearchBox/index.js

src/components/CardDesign3/index.js

@@ -2,6 +2,9 @@ import React from "react";
 import CustomToast2 from "../CustomToast2";
 import Button from "../Button";
 import TitleSubtitle from "../TitleSubtitle";
+import SearchBox from "../SearchBox";
+
+import searchIcon from "./search-icon.svg";
 
 const CardDesign3 = () => {
   return (
@@ -12,6 +15,13 @@ const CardDesign3 = () => {
         titleClassName={"font-bold text-[#0F0543]"}
         titleBorderClassName={"w-1.5 h-7 bg-[#1F8CF9] ml-2"}
       />
+      <SearchBox
+        inputWidth={"100%"}
+        searchIcon={searchIcon}
+        placeholder={"جستجو برا اساس اسم یا کد ملی"}
+        placeHolderColor={"placeholder-[#D2D2D2]"}
+        borderClr={"#D2D2D2"}
+      />
       <CustomToast2 num={4} />
     </div>
   );

src/components/CardDesign3/search-icon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <g id="vuesax_linear_search-normal" data-name="vuesax/linear/search-normal" transform="translate(-428 -188)">
+    <g id="search-normal">
+      <path id="Vector" d="M19,9.5A9.5,9.5,0,1,1,9.5,0,9.5,9.5,0,0,1,19,9.5Z" transform="translate(430 190)" fill="none" stroke="#2483e1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M2,2,0,0" transform="translate(448 208)" fill="none" stroke="#2483e1" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0H24V24H0Z" transform="translate(428 188)" fill="none" opacity="0"/>
+    </g>
+  </g>
+</svg>

src/components/SearchBox/index.js

@@ -10,6 +10,7 @@ const SearchBox = ({
   backgroundColor,
   inputWidth,
   placeHolderColor,
+  placeholder,
 }) => {
   const [activeSearchBox, setActiveSearchBox] = useState(false);
   return (
@@ -33,7 +34,7 @@ const SearchBox = ({
         onFocus={() => setActiveSearchBox(true)}
         // onBlur={() => setActiveSearchBox(false)}
         type="text"
-        placeholder="دنبال چه چیزی هستید"
+        placeholder={placeholder}
         className={`text-xs text-blue-400 rounded focus:outline-none border focus:border-blue-200 focus:ring focus:ring-blue-200 focus:ring-opacity-20 ${placeHolderColor}`}
         style={{
           backgroundColor: backgroundColor,
@@ -51,6 +52,8 @@ SearchBox.defaultProps = {
   cancleIcon: zarbedar,
   searchIcon: search,
 
+  placeholder: "دنبال چه چیزی هستید",
+
   inputWidth: "15%",
 
   borderClr: "#B5D6FF",