From a485b42b81d875a0650d6e53b50b3bec0a158541 Mon Sep 17 00:00:00 2001
From: mahdi <andalibmahdi45@gmail.com>
Date: Sun, 1 May 2022 09:19:10 +0430
Subject: [PATCH] update App.js, src/components/FormInput/index.js and
 src/index.scss

---
 src/App.js                              |  2 +-
 src/components/CustomSelectBox/index.js | 22 ++++++++++++++++++++++
 src/components/FormInput/index.js       | 15 +++------------
 src/index.scss                          |  2 +-
 4 files changed, 27 insertions(+), 14 deletions(-)
 create mode 100644 src/components/CustomSelectBox/index.js

diff --git a/src/App.js b/src/App.js
index caf6076..1327250 100644
--- a/src/App.js
+++ b/src/App.js
@@ -272,7 +272,7 @@ function App() {
         {/* <LeafletMap /> */}
 
         {/* <Digikala /> */}
-        <TestComponentNew />
+        {/* <TestComponentNew /> */}
       </div>
     </Provider>
   );
diff --git a/src/components/CustomSelectBox/index.js b/src/components/CustomSelectBox/index.js
new file mode 100644
index 0000000..ebdc19f
--- /dev/null
+++ b/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: "دکتری" },
+  ],
+};
diff --git a/src/components/FormInput/index.js b/src/components/FormInput/index.js
index 8311252..7372a25 100644
--- a/src/components/FormInput/index.js
+++ b/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">
-          <option>میزان تحصیلات</option>
-          <option>کارشناسی</option>
-          <option>ارشد</option>
-          <option>دکتری</option>
-        </select>{" "}
+        <CustomSelectBox />
         <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">
-          <option>شهر مبدا</option>
-          <option>تهران</option>
-          <option>تهران</option>
-          <option>تهران</option>
-        </select>
+        <CustomSelectBox />
         <Input
           register={register("foundus")}
           label="نحوه آشنایی با موکب"
diff --git a/src/index.scss b/src/index.scss
index 79059cc..0888fb9 100644
--- a/src/index.scss
+++ b/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;