.

src/components/jobPopout/EditJobPopout.jsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ModalCom from "../Helpers/ModalCom";
-import { Form, Formik } from "formik";
+import { Field, Form, Formik } from "formik";
 import * as Yup from "yup";
 import InputCom from "../Helpers/Inputs/InputCom";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
@@ -245,20 +245,34 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
                     </div>
 
                     <div className="field w-full mb-6">
-                      <InputCom
-                        fieldClass="px-6"
-                        label="Timeline"
-                        labelClass="tracking-wide"
-                        inputBg="bg-slate-100"
-                        inputClass=" input-curve lg border border-[#dce4e9]"
-                        type="text"
-                        name="timeline_days"
-                        spanTag=" - Expected duration of this task"
-                        // placeholder="Please Enter Detail Description of Job"
-                        value={props.values.timeline_days}
-                        inputHandler={props.handleChange}
-                        blurHandler={props.handleBlur}
-                      />
+                    <div className={`flex items-center justify-between mb-2.5`}>
+                      <label
+                        className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block"
+                        htmlFor="timeline_days"
+                      >
+                        Timeline
+                        <span className="text-green-700 text-sm tracking-wide">
+                          - Expected duration of this task
+                        </span>
+                      </label>
+                    </div>
+
+                    <Field
+                      component="select"
+                      name="timeline_days"
+                      className="input-field p-2 mt-3 rounded-md placeholder:text-base text-dark-gray dark:text-white w-full h-10 bg-slate-100 dark:bg-[#11131F] focus:ring-0 focus:outline-none"
+                      value={props.values.timeline_days}
+                    >
+                      <option value="">Select Duration</option>
+                      {publicArray.map(({ name, duration }, idx) => (
+                        <option
+                          className="text-slate-500 text-lg"
+                          value={duration}
+                        >
+                          {name}
+                        </option>
+                      ))}
+                    </Field>
                       {props.errors.timeline_days &&
                         props.touched.timeline_days && (
                           <p className="text-sm text-red-500">
@@ -316,3 +330,16 @@ const EditJobPopOut = ({ details, onClose, situation, country }) => {
 };
 
 export default EditJobPopOut;
+
+const publicArray = [
+  { duration: 1, name: "1 day" },
+  { duration: 2, name: "2 days" },
+  { duration: 3, name: "3 days" },
+  { duration: 4, name: "4 days" },
+  { duration: 5, name: "5 days" },
+  { duration: 6, name: "6 days" },
+  { duration: 7, name: "1 week" },
+  { duration: 14, name: "2 weeks" },
+  { duration: 21, name: "3 weeks" },
+  { duration: 28, name: "4 weeks" },
+];