update App.js, src/components/FormInput/index.js and src/index.scss

src/App.js

@@ -272,7 +272,7 @@ function App() {
         {/* <LeafletMap /> */}
 
         {/* <Digikala /> */}
-        <TestComponentNew />
+        {/* <TestComponentNew /> */}
       </div>
     </Provider>
   );

src/components/CustomSelectBox/index.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+const CustomSelectBox = ({ options }) => {
+  return (
+    <select className="customizeSelect rounded text-xs mx-1 py-2 bg-[#F9F9F9] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent">
+      {options.map((option, index) => (
+        <option key={index}>{option.title}</option>
+      ))}
+    </select>
+  );
+};
+
+export default CustomSelectBox;
+
+CustomSelectBox.defaultProps = {
+  options: [
+    { title: "میزان تحصیلات" },
+    { title: "کارشناسی" },
+    { title: "ارشد" },
+    { title: "دکتری" },
+  ],
+};

src/components/FormInput/index.js

@@ -3,6 +3,7 @@ import { useForm } from "react-hook-form";
 
 import DateRangePicker from "../DateRangePicker";
 import Input from "../AnimatedInput/Input";
+import CustomSelectBox from "../CustomSelectBox";
 
 const FormInput = () => {
   const { register, getValues } = useForm();
@@ -37,12 +38,7 @@ const FormInput = () => {
           borderClassname={`border-transparent `}
           className={``}
         />
-        <select className="customizeSelect rounded text-xs mx-1 py-2 bg-[#F9F9F9] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent">
+        <CustomSelectBox />
-          <option>میزان تحصیلات</option>
-          <option>کارشناسی</option>
-          <option>ارشد</option>
-          <option>دکتری</option>
-        </select>{" "}
         <Input
           register={register("gender")}
           label="جنسیت"
@@ -66,12 +62,7 @@ const FormInput = () => {
           borderClassname={`border-transparent `}
           className={``}
         />
-        <select className="customizeSelect rounded text-xs mx-1 py-2 bg-[#F9F9F9] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent">
+        <CustomSelectBox />
-          <option>شهر مبدا</option>
-          <option>تهران</option>
-          <option>تهران</option>
-          <option>تهران</option>
-        </select>
         <Input
           register={register("foundus")}
           label="نحوه آشنایی با موکب"

src/index.scss

@@ -46,7 +46,7 @@ l.leaflet-popup-content,
   font-family: "iransans-medium" !important;
 }
 
-// class for selectbox
+// ? class for selectbox inside -->> CustomSelectBox  <<--
 .customizeSelect {
   background-position: left 0.5rem center;
   padding-right: 1rem;