diff --git a/src/components/MyPendingJobs/ParentWaiting.jsx b/src/components/MyPendingJobs/ParentWaiting.jsx index cf2f468..523e845 100644 --- a/src/components/MyPendingJobs/ParentWaiting.jsx +++ b/src/components/MyPendingJobs/ParentWaiting.jsx @@ -4,6 +4,7 @@ import { toast } from "react-toastify"; import activeAidsBanner from "../../assets/images/kids-waiting.jpg"; import HeroUser from "../../assets/images/hero-user.png"; import CountDown from "../Helpers/CountDown"; +import ParentWaitingTable from "./ParentWaitingTable"; export default function ParentWaiting({ className }) { const [addFavorite, setValue] = useState(false); @@ -31,61 +32,32 @@ export default function ParentWaiting({ className }) { /> -
-
-

- Lock and Lob x Fiesta Spurs -

- - ID : 2320382 - -
- {/* user */} -
-
- -
-
-

- Brokln Simons -

-

- @broklinslam_75 -

-
-
+
+ {} + + {/*
*/} + {/*

*/} + {/* Lock and Lob x Fiesta Spurs*/} + {/*

*/} + {/* */} + {/* ID : 2320382*/} + {/**/} + {/*
*/} + {/* /!* user *!/*/} + {/*
*/} + {/*
*/} + {/* */} + {/*
*/} + {/*
*/} + {/*

*/} + {/* Brokln Simons*/} + {/*

*/} + {/*

*/} + {/* @broklinslam_75*/} + {/*

*/} + {/*
*/} + {/*
*/} -
- - - - - View Art Work - - -
diff --git a/src/components/MyPendingJobs/ParentWaitingTable.jsx b/src/components/MyPendingJobs/ParentWaitingTable.jsx new file mode 100644 index 0000000..db4cdc9 --- /dev/null +++ b/src/components/MyPendingJobs/ParentWaitingTable.jsx @@ -0,0 +1,339 @@ +import React, { useState } from "react"; +import transaction1 from "../../assets/images/recent-transation-1.png"; +import transaction2 from "../../assets/images/recent-transation-2.png"; +import transaction3 from "../../assets/images/recent-transation-3.png"; + +export default function ParentWaitingTable() { + const transationFilterData = [ + { + id: 1, + name: "all", + uniqueId: Math.random(), + }, + { + id: 2, + name: "send", + uniqueId: Math.random(), + }, + { + id: 3, + name: "recent", + uniqueId: Math.random(), + }, + ]; + const [filterActive, setValue] = useState(transationFilterData[0].id); + const filterHander = (value) => { + setValue(value); + }; + return ( +
+ {/* heading */} +
+ +
+
    + {transationFilterData.map((value) => ( +
  • filterHander(value.id)} + key={value.uniqueId} + className={`text-base text-thin-light-gray hover:text-purple border-b dark:border-[#5356fb29] border-transparent hover:border-purple uppercase ${ + filterActive === value.id ? "border-purple text-purple" : "" + }`} + > + {value.name} +
    • + ))} + {/*
  • + All +
    • +
  • + SEND +
    • +
  • + recent +
    • */} +
+
+
+ {/* content */} + + {filterActive === 2 ? ( +
+ +
+ ) : filterActive === 3 ? ( +
+ +
+ ) : ( +
+ +
+ )} +
+ ); +}