Rearrangement of New Task Layout

src/components/FamilyAcc/FamilyPopout/forms/NewTasks.jsx

@@ -1,25 +1,16 @@
 import React, { useEffect, useState } from "react";
 import usersService from "../../../../services/UsersService";
 import InputCom from "../../../Helpers/Inputs/InputCom";
+import debounce from "../../../../hooks/debounce";
 
-export default function NewTasks({ onChange }) {
+const DEFAULT_IMAGE = require("../../../../assets/images/taskbanners/default.jpg");
+export default function NewTasks({ formState, setFormState }) {
   let [currency, setCurrency] = useState({
     loading: true,
     status: false,
     data: null,
   });
 
-  const [formState, setFormState] = useState({
-    // Initialize form state with desired fields
-    country: "",
-    price: "",
-    title: "",
-    description: "",
-    job_detail: "",
-    timeline_days: "",
-    category: [],
-  });
-
   const ApiCall = new usersService();
 
   // FUNCTION TO GET Currency
@@ -49,7 +40,6 @@ export default function NewTasks({ onChange }) {
       ...prevState,
       [name]: value,
     }));
-    onChange(formState); // Pass the form data to the parent on every change
   };
 
   useEffect(() => {
@@ -57,8 +47,8 @@ export default function NewTasks({ onChange }) {
   }, []);
 
   return (
-    <form className="w-full">
-      <div className="flex flex-col gap-3">
+    <form className="w-full flex justify-between items-center">
+      <div className="flex flex-col gap-3 max-w-[77%]">
         {/* inputs starts here */}
         <div className="grid md:grid-cols-3 grid-cols-1 gap-6 mb-[5px]">
           {/* Currency */}
@@ -79,13 +69,13 @@ export default function NewTasks({ onChange }) {
               // onBlur={props.handleBlur}
             >
               {currency.loading ? (
-                <option className="text-slate-500 text-lg" value="">
+                <option className="text-slate-500 text-[13.975px]" value="">
                   Loading...
                 </option>
               ) : currency.data.length ? (
                 <>
-                  <option className="text-slate-500 text-lg" value="">
-                    Select a currency
+                  <option className="text-slate-500 text-[13.975px]" value="">
+                    Currency
                   </option>
                   {currency.data?.map((item, index) => (
                     <option
@@ -141,11 +131,14 @@ export default function NewTasks({ onChange }) {
             >
               {publicArray.length && (
                 <>
-                  <option className="text-slate-500 text-lg" value="">
-                    Select Duration
+                  <option className="text-slate-500 text-[13.975px]" value="">
+                    Duration
                   </option>
                   {publicArray.map(({ name, duration }, idx) => (
-                    <option className="text-slate-500 text-lg" value={duration}>
+                    <option
+                      className="text-slate-500 text-[13.975px]"
+                      value={duration}
+                    >
                       {name}
                     </option>
                   ))}
@@ -210,6 +203,16 @@ export default function NewTasks({ onChange }) {
           </div>
         </div>
       </div>
+      {/* Banner Image */}
+      <div className="max-w-[20%] w-full">
+        <div className="h-32 w-full">
+          <img
+            src={DEFAULT_IMAGE}
+            alt="task_banner_img"
+            className="w-full h-full object-contain"
+          />
+        </div>
+      </div>
     </form>
   );
 }