Changed add job to modal

src/components/MyJobs/index.jsx

@@ -3,50 +3,41 @@ import { Link } from "react-router-dom";
 import Layout from "../Partials/Layout";
 import MyJobTable from "./MyJobTable";
 import CommonHead from "../UserHeader/CommonHead";
+import AddJobPage from "../../views/AddJobPage";
 
 export default function MyJobs(props) {
-  const [selectTab, setValue] = useState("today");
-  const filterHandler = (value) => {
-    setValue(value);
+  const [popUp, setPopUp] = useState(false);
+  const popUpHandler = () => {
+    setPopUp((prev) => !prev);
   };
-  
+
   return (
     <Layout>
-      <CommonHead
-          commonHeadData={props.commonHeadData}
-      />
+      <CommonHead commonHeadData={props.commonHeadData} />
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
-          <div className="sm:flex justify-between items-center mb-6">
+          <div className="sm:flex items-center mb-6">
             <div className="mb-5 sm:mb-0">
               <h1 className="text-26 font-bold flex items-center space-x-1  text-dark-gray dark:text-white gap-2">
-                <span
-                  className={`${selectTab === "today" ? "block" : "hidden"}`}
-                >
-                  My Jobs
-                </span>
+                <span>My Jobs</span>
 
-                <Link
-                  to="/add-job"
+                <button
                   className="text-white btn-gradient text-lg tracking-wide px-5 py-2 rounded-full"
+                  onClick={popUpHandler}
                 >
                   Add Job
-                </Link>
+                </button>
               </h1>
             </div>
-            <div className="slider-btns flex space-x-4">
-              <div
-                onClick={() => filterHandler("today")}
-                className="relative"
-              ></div>
-            </div>
           </div>
-          <MyJobTable
-              MyJobList={props.MyJobList}
-          />
+          <MyJobTable MyJobList={props.MyJobList} />
         </div>
       </div>
+
+      {/* Add Job List Popout */}
+      {popUp && <AddJobPage action={popUpHandler} situation={popUp} />}
+      {/* End of Add Job List Popout */}
     </Layout>
   );
 }