update src/components/DateRangePicker/index.js, Input.js, src/components/FormInput/index.js and src/index.scss

src/components/DateRangePicker/index.js

@@ -47,9 +47,9 @@ function CustomRangeInput({ openCalendar, value }) {
 
 const DateRangePicker = () => {
   return (
-    <div className="w-1/2 mx-auto" style={{ direction: "rtl" }}>
-      <Calendar calendar={persian} locale={persian_fa} />
-      <hr className="my-20" />
+    <div className="w-full" style={{ direction: "rtl" }}>
+      {/* <Calendar calendar={persian} locale={persian_fa} />
+      <hr className="my-20" /> */}
       <DatePicker
         range
         calendar={persian}

src/components/FormInput/Input.js

@@ -9,6 +9,7 @@ const FormFields = ({
   set,
   label,
   borderClassname,
+  inputClassname,
   type,
   maxLength,
   max,
@@ -22,11 +23,9 @@ const FormFields = ({
     <div
       onClick={onClick}
       className={
-        "h-full flex flex-row items-center rounded border mx-1 relative " +
+        "h-full flex flex-row items-center rounded border mx-1 relative  " +
         borderClassname +
-        (value
-          ? " border-[#2483E1] bg-white border rounded"
-          : " bg-transparent")
+        (value ? " bg-white border rounded" : " bg-transparent")
       }
     >
       <div
@@ -45,11 +44,6 @@ const FormFields = ({
           maxLength={maxLength}
           value={value}
           type={"text"}
-          className={`rtl w-full h-full  px-4 py-2 bg-[#F9F9F9] text-[#F9F9F9] outline-0 text-xs rounded  focus:border-[#2483E1 focus:ring-[#2483E1
-                ${value === "" ? "bg-[#F9F9F9]" : "bg-red-600"}
-              `}
-          onChange={(e) => setValue(e.target.value)}
-          inputMode={type === "number" ? "numeric" : ""}
           onInput={(e) => {
             let value = e.target.value;
             if (type === "number")
@@ -60,6 +54,10 @@ const FormFields = ({
             if (!isNaN(min) && +e.target.value < min) value = min;
             e.target.value = value;
           }}
+          className={`rtl w-full h-full px-4 py-2 outline-0 text-xs rounded-md text-[#0F0543] focus:bg-white border-[#E0E0E0] focus:border-[#2483E1] focus:ring-transparent
+             ${value === "" ? "bg-red-200 " : "bg-[#F9F9F9] "} `}
+          onChange={(e) => setValue(e.target.value)}
+          inputMode={type === "number" ? "numeric" : ""}
         />
       ) : (
         <textarea
@@ -77,5 +75,5 @@ const FormFields = ({
 export default FormFields;
 
 FormFields.defaultProps = {
-  borderClassname: "border-[#2483E1] bg-indigo-600",
+  // borderClassname: "border-[#E0E0E0]",
 };

src/components/FormInput/index.js

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import { useForm } from "react-hook-form";
+import DateRangePicker from "../DateRangePicker";
 
 import Input from "./Input";
 
@@ -9,30 +10,92 @@ const FormInput = () => {
 
   return (
     <div className="mx-72 mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3]  divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm">
-      <div className="flex-grow px-4">
+      <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
         <Input
           register={register("firstName")}
           // defaultValue={info?.firstName}
           label="نام "
-          borderClassname={` ${
-            selectedInput === true ? "border-[#E0E0E0]" : "border-[#2483E1]"
-          }`}
-          onClick={() => setSelectedInput(true)}
+          type="text"
+          borderClassname={`border-transparent `}
+          className={``}
+          // borderClassname={` ${
+          //   selectedInput === true ? "border-[#2483E1]" : "border-[#E0E0E0]"
+          // }`}
+          // onClick={() => setSelectedInput(true)}
+        />
+        <Input
+          register={register("lastName")}
+          label="نام خانوادگی"
+          type="text"
+          borderClassname={`border-transparent `}
+          className={``}
+        />
+        <Input
+          register={register("birthYear")}
+          label="تاریخ تولد"
+          type="number"
+          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>{" "}
+        <Input
+          register={register("birthYear")}
+          label="جنسیت"
+          type="number"
+          borderClassname={`border-transparent `}
+          className={``}
         />
       </div>
-      <div className="flex-grow px-4">
+      <div className="flex-grow flex-1 flex flex-col gap-y-4 px-4">
         <Input
-          register={register("firstName")}
-          // defaultValue={info?.firstName}
-          label="نام "
+          register={register("mobileNumber")}
+          label="شماره تماس"
+          type="text"
+          borderClassname={`border-transparent `}
+          className={``}
+        />
+        <Input
+          register={register("job")}
+          label="شغل"
+          type="text"
+          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>
+        <Input
+          register={register("foundus")}
+          label="نحوه آشنایی با موکب"
+          type="text"
+          borderClassname={`border-transparent `}
+          className={``}
+        />
+        <Input
+          register={register("foundus")}
+          label="کد ملی"
+          type="number"
+          borderClassname={`border-transparent `}
+          className={``}
         />
       </div>
-      <div className="flex-grow px-4">
+      <div className="flex-grow flex-1 flex flex-col  px-4">
         <Input
-          register={register("firstName")}
-          // defaultValue={info?.firstName}
-          label="نام "
+          register={register("lastName")}
+          label="تاریخ ورود"
+          type="text"
+          borderClassname={`border-transparent `}
+          className={``}
         />
+        <DateRangePicker />
       </div>
     </div>
   );

src/index.scss

@@ -44,3 +44,9 @@ l.leaflet-popup-content,
 .leaflet-touch .leaflet-draw-actions a {
   font-family: "iransans-medium" !important;
 }
+
+// class for selectbox
+.customizeSelect {
+  background-position: left 0.5rem center;
+  padding-right: 1rem;
+}