WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

manage layout accnt type and fixed width of table

Browse Source
This commit is contained in:
Ebube
2023-05-22 15:22:04 +01:00
parent 74c6f6526a
commit 6ae8be146f
6 changed files with 244 additions and 488 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/FamilyAcc/FamilyTable.jsx
+1 -1
View File
@@ -52,7 +52,7 @@ export default function FamilyTable({ className, familyList, loader }) {
> >
<td className=" py-4"> <td className=" py-4">
<div className="flex space-x-2 items-center w-full"> <div className="flex space-x-2 items-center w-full">
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]"> <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px]">
<img <img
src={dataImage1} src={dataImage1}
alt="data" alt="data"
src/components/Helpers/Inputs/InputCom/index.jsx
+1 -1
View File
@@ -107,7 +107,7 @@ export default function InputCom({
} }
const inputConfigs = { const inputConfigs = {
email: { minLength: 7, maxLength: 30 }, email: { minLength: 7, maxLength: 35 },
first_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" }, first_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
last_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" }, last_name: { minLength: 3, maxLength: 25, pattern: "[a-zA-Z]+" },
address: { minLength: 5, maxLength: 49, pattern: "[a-zA-Z0-9]+" }, address: { minLength: 5, maxLength: 49, pattern: "[a-zA-Z0-9]+" },
src/components/MyJobs/MyJobTable.jsx
+1 -1
View File
@@ -111,7 +111,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
<td className="py-9"> <td className="py-9">
<div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items"> <div className="sm:flex sm:space-x-2 sm:justify-between sm:items-center job-items">
<div className="flex space-x-2 items-center job-items w-full"> <div className="flex space-x-2 items-center job-items w-full">
<div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] max-w-[60px]"> <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px]">
<img <img
src={dataImage2} src={dataImage2}
alt="data" alt="data"
src/components/MyTasks/MyJobTable.jsx
+1 -1
View File
@@ -68,7 +68,7 @@ export default function MyJobTable({ className }) {
> >
<div className=" py-4"> <div className=" py-4">
<div className="flex space-x-2 items-center"> <div className="flex space-x-2 items-center">
<div className="w-full max-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center"> <div className="w-full min-w-[60px] flex-[0.1] h-[60px] rounded-full overflow-hidden flex justify-center items-center">
<img <img
src={dataImage1} src={dataImage1}
alt="data" alt="data"
src/components/Partials/MobileSideBar.jsx
+83 -129
View File
@@ -82,173 +82,127 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler }) {
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
{/* Using mini component reduces the bulk amount of html */} {/* Using mini component reduces the bulk amount of html */}
{[ {[
{ name: "Dashboard", path: "/" }, { name: "Dashboard", path: "/", iconName: "market" },
{ name: "Market", path: "/market", bubble: noOfJobs }, userDetails?.account_type !== "family"
{ name: "My Task(s)", path: "/mytask" }, ? {
].map(({ name, path, bubble }, idx) => ( name: "Market",
path: "/market",
bubble: noOfJobs,
iconName: "market",
}
: {},
{ name: "My Task(s)", path: "/mytask", iconName: "market" },
].map(({ name, path, bubble, iconName }, idx) => (
<ListItem <ListItem
key={idx} key={idx}
title={name} title={name}
route={path} route={path}
bubble={bubble} bubble={bubble}
sidebar sidebar={sidebar}
iconName={iconName}
/> />
))} ))}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/notification"*/}
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">*/}
{/* <Icons name="notification" />*/}
{/* </span>*/}
{/* <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
{/* Messages*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/my-wallet"*/}
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">*/}
{/* <Icons name="wallet-two" />*/}
{/* </span>*/}
{/* <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
{/* My Wallet*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/resources"*/}
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">*/}
{/* <Icons name="star" />*/}
{/* </span>*/}
{/* <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
{/* Resources*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/history"*/}
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">*/}
{/* <Icons name="history" />*/}
{/* </span>*/}
{/* <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
{/* History*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/referral"*/}
{/* className="nav-item flex items-center justify-start space-x-3.5"*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">*/}
{/* <Icons name="history" />*/}
{/* </span>*/}
{/* <span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">*/}
{/* Refer a Friend*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
</ul> </ul>
</div> </div>
</div> </div>
{!userDetails.post_jobs ? ( {userDetails?.account_type !== "family" && (
<div className="setting-item"> <>
<div className="top-platform bg-pink dark:bg-dark-white rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border "> {!userDetails?.post_jobs ? (
<div className="menu-setting-items mb-11">
{/* menus item */}
<div
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
sidebar ? "mb-14" : "rounded-none p-0"
}`}
>
<div className="items">
<div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">
Job Post
</h1>
</div>
<ul className="flex flex-col space-y-6">
<li className="item group">
<NavLink <NavLink
to="/start-job" to="/start-job"
className="nav-item flex items-center justify-start space-x-3.5" className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar
? "justify-start space-x-3.5"
: "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="people-two" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
> >
<span className="item-content relative group-hover:text-purple text-xl transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
Enable Job Post Enable Job Post
</span> </span>
</NavLink> </NavLink>
</li>
</ul>
</div>
</div> </div>
</div> </div>
) : jobLists?.result_list?.length ? ( ) : jobLists?.result_list?.length ? (
<div className="setting-item"> <div className="setting-item">
<div className="heading mb-5"> <div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">My Jobs</h1> <h1 className="title text-xl font-bold text-purple">
My Jobs
</h1>
</div> </div>
<div className="items"> <div className="items">
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
<li className="item group"> {[
<NavLink { name: "List", path: "/myjobs", iconName: "people-two" },
to="/myjobs" {
className="nav-item flex items-center justify-start space-x-3.5" name: "Pending",
> path: "/my-pending-jobs",
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white"> iconName: "people-two",
<Icons name="people-two" /> },
</span> {
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1"> name: "Active",
My Jobs path: "/my-active-jobs",
</span> iconName: "people-two",
</NavLink> },
</li> ].map(({ name, path, iconName }, idx) => (
<li className="item group"> <ListItem
<NavLink key={idx}
to="/my-active-jobs" title={name}
className="nav-item flex items-center justify-start space-x-3.5" route={path}
> sidebar={sidebar}
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white"> iconName={iconName}
<Icons name="setting" /> />
</span> ))}
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
Pending
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/my-active-jobs"
className="nav-item flex items-center justify-start space-x-3.5"
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white">
<Icons name="setting" />
</span>
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
Active Job(s)
</span>
</NavLink>
</li>
</ul> </ul>
</div> </div>
</div> </div>
) : ( ) : (
<div className="setting-item"> <div className="setting-item">
<div className="heading mb-5"> <div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">My Jobs</h1> <h1 className="title text-xl font-bold text-purple">
My Jobs
</h1>
</div> </div>
<div className="items"> <div className="items">
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
<li className="item group"> <ListItem
<NavLink title="Add Job"
to="/add-job" route="/add-job"
className="nav-item flex items-center justify-start space-x-3.5" iconName="people-two"
> sidebar={sidebar}
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white"> />
<Icons name="people-two" />
</span>
<span className="item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
My Jobs
</span>
</NavLink>
</li>
</ul> </ul>
</div> </div>
</div> </div>
)} )}
</>
)}
</div> </div>
{/* signout area */} {/* signout area */}
{sidebar ? ( {sidebar ? (
src/components/Partials/Sidebar.jsx
+78 -276
View File
@@ -10,6 +10,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
const darkMode = useContext(DarkModeContext); const darkMode = useContext(DarkModeContext);
let { userDetails } = useSelector((state) => state.userDetails); let { userDetails } = useSelector((state) => state.userDetails);
console.log(userDetails);
//const jobLists = getJobList(); // pass from upper - we need in a lot of places //const jobLists = getJobList(); // pass from upper - we need in a lot of places
let { jobLists } = useSelector((state) => state.jobLists); let { jobLists } = useSelector((state) => state.jobLists);
const marketData = jobLists?.result_list; const marketData = jobLists?.result_list;
@@ -103,184 +104,68 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
{/* Using mini component reduces the bulk amount of html */} {/* Using mini component reduces the bulk amount of html */}
{[ {[
{ name: "Dashboard", path: "/" }, { name: "Dashboard", path: "/", iconName: "market" },
{ name: "Market", path: "/market", bubble: noOfJobs }, userDetails?.account_type !== "family"
{ name: "My Task(s)", path: "/mytask" }, ? {
].map(({ name, path, bubble }, idx) => ( name: "Market",
path: "/market",
bubble: noOfJobs,
iconName: "market",
}
: {},
{ name: "My Task(s)", path: "/mytask", iconName: "market" },
].map(({ name, path, bubble, iconName }, idx) => (
<ListItem <ListItem
key={idx} key={idx}
title={name} title={name}
route={path} route={path}
bubble={bubble} bubble={bubble}
sidebar={sidebar} sidebar={sidebar}
iconName={iconName}
/> />
))} ))}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/notification"*/}
{/* className={`nav-item flex items-center ${*/}
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
{/* }`}*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
{/* <Icons name="notification-setting" />*/}
{/* </span>*/}
{/* <span*/}
{/* className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${*/}
{/* sidebar ? "active flex-1" : "w-0"*/}
{/* }`}*/}
{/* >*/}
{/* Messages*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/my-wallet"*/}
{/* className={`nav-item flex items-center ${*/}
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
{/* }`}*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
{/* <Icons name="wallet-two" />*/}
{/* </span>*/}
{/* <span*/}
{/* className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${*/}
{/* sidebar ? "active flex-1" : "w-0"*/}
{/* }`}*/}
{/* >*/}
{/* My Wallet*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/resources"*/}
{/* className={`nav-item flex items-center ${*/}
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
{/* }`}*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
{/* <Icons name="star" />*/}
{/* </span>*/}
{/* <span*/}
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
{/* sidebar ? "active flex-1" : "w-0"*/}
{/* }`}*/}
{/* >*/}
{/* Resources*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/history"*/}
{/* className={`nav-item flex items-center ${*/}
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
{/* }`}*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
{/* <Icons name="history" />*/}
{/* </span>*/}
{/* <span*/}
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
{/* sidebar ? "active flex-1" : "w-0"*/}
{/* }`}*/}
{/* >*/}
{/* History*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/referral"*/}
{/* className={`nav-item flex items-center ${*/}
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
{/* }`}*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
{/* <Icons name="history" />*/}
{/* </span>*/}
{/* <span*/}
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
{/* sidebar ? "active flex-1" : "w-0"*/}
{/* }`}*/}
{/* >*/}
{/* Refer a Friend*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
</ul> </ul>
</div> </div>
</div> </div>
{/* <div className="setting-item">
<div class="heading bg-pink dark:bg-dark-white rounded-2xl p-6 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border ">
<NavLink to="/acc-family">
<span className="item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium active flex-1">
Family Account
</span>
</NavLink>
</div>
</div> */}
{/* menu and settings item */} {/* menu and settings item */}
{userDetails?.account_type !== "family" && (
<div className="menu-setting-items mb-11"> <div className="menu-setting-items mb-11">
{/* menus item */} {/* menus item */}
<div className={`menu-item transition-all duration-300 ease-in-out ${ <div
className={`menu-item transition-all duration-300 ease-in-out ${
sidebar ? "mb-14" : "" sidebar ? "mb-14" : ""
}`}> }`}
{/* <div className="heading mb-5 bg-dark-blue rounded-2xl p-2 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border"> >
<NavLink to="/acc-family">
<h1 className="title text-xl font-bold text-purple">
Family Corner
</h1>
</NavLink>
</div> */}
<div className="items"> <div className="items">
<div className="heading mb-5"> <div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">Family</h1> <h1 className="title text-xl font-bold text-purple">
Family
</h1>
</div> </div>
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
<li className="item group"> <ListItem
<NavLink title="Family Corner"
to="/acc-family" route="/acc-family"
className={`nav-item flex items-center ${ iconName="people-two"
((navData) => (navData.isActive ? "active" : ""), sidebar={sidebar}
sidebar ? "justify-start space-x-3.5" : "justify-center") />
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="people-two" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
Family Corner
</span>
</NavLink>
</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
)}
{!userDetails.post_jobs ? ( {userDetails?.account_type !== "family" && (
<>
{!userDetails?.post_jobs ? (
<div className="menu-setting-items mb-11"> <div className="menu-setting-items mb-11">
{/* menus item */} {/* menus item */}
<div className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${ <div
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
sidebar ? "mb-14" : "rounded-none p-0" sidebar ? "mb-14" : "rounded-none p-0"
}`}> }`}
>
{/* <div className="setting-item"> {/* <div className="setting-item">
<div className="top-platform bg-pink dark:bg-dark-white rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border"> <div className="top-platform bg-pink dark:bg-dark-white rounded-2xl p-16 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border">
<NavLink to="/start-job"> <NavLink to="/start-job">
@@ -292,7 +177,9 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
</div> */} </div> */}
<div className="items"> <div className="items">
<div className="heading mb-5"> <div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">Job Post</h1> <h1 className="title text-xl font-bold text-purple">
Job Post
</h1>
</div> </div>
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
<li className="item group"> <li className="item group">
@@ -300,7 +187,9 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
to="/start-job" to="/start-job"
className={`nav-item flex items-center ${ className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""), ((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center") sidebar
? "justify-start space-x-3.5"
: "justify-center")
}`} }`}
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
@@ -322,144 +211,57 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
) : jobLists?.result_list?.length ? ( ) : jobLists?.result_list?.length ? (
<div className="setting-item"> <div className="setting-item">
<div className="heading mb-5"> <div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">My Jobs</h1> <h1 className="title text-xl font-bold text-purple">
My Jobs
</h1>
</div> </div>
<div className="items"> <div className="items">
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
<li className="item group"> {[
<NavLink { name: "List", path: "/myjobs", iconName: "people-two" },
to="/myjobs" {
className={`nav-item flex items-center ${ name: "Pending",
((navData) => (navData.isActive ? "active" : ""), path: "/my-pending-jobs",
sidebar ? "justify-start space-x-3.5" : "justify-center") iconName: "people-two",
}`} },
> {
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> name: "Active",
<Icons name="people-two" /> path: "/my-active-jobs",
</span> iconName: "people-two",
<span },
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${ ].map(({ name, path, iconName }, idx) => (
sidebar ? "active flex-1" : "w-0" <ListItem
}`} key={idx}
> title={name}
List route={path}
</span> sidebar={sidebar}
</NavLink> iconName={iconName}
</li> />
<li className="item group"> ))}
<NavLink
to="/my-pending-jobs"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="people-two" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
Pending
</span>
</NavLink>
</li>
<li className="item group">
<NavLink
to="/my-active-jobs"
className={`nav-item flex items-center ${
((navData) => (navData.isActive ? "active" : ""),
sidebar ? "justify-start space-x-3.5" : "justify-center")
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="people-two" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
Active
</span>
</NavLink>
</li>
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/profile"*/}
{/* className={`nav-item flex items-center ${*/}
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
{/* }`}*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
{/* <Icons name="people-two" />*/}
{/* </span>*/}
{/* <span*/}
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
{/* sidebar ? "active flex-1" : "w-0"*/}
{/* }`}*/}
{/* >*/}
{/* My Profile*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
{/*<li className="item group">*/}
{/* <NavLink*/}
{/* to="/settings"*/}
{/* className={`nav-item flex items-center ${*/}
{/* ((navData) => (navData.isActive ? "active" : ""),*/}
{/* sidebar ? "justify-start space-x-3.5" : "justify-center")*/}
{/* }`}*/}
{/* >*/}
{/* <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">*/}
{/* <Icons name="setting" />*/}
{/* </span>*/}
{/* <span*/}
{/* className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${*/}
{/* sidebar ? "active flex-1" : "w-0"*/}
{/* }`}*/}
{/* >*/}
{/* Settings*/}
{/* </span>*/}
{/* </NavLink>*/}
{/*</li>*/}
</ul> </ul>
</div> </div>
</div> </div>
) : ( ) : (
<div className="setting-item"> <div className="setting-item">
<div className="heading mb-5"> <div className="heading mb-5">
<h1 className="title text-xl font-bold text-purple">My Jobs</h1> <h1 className="title text-xl font-bold text-purple">
My Jobs
</h1>
</div> </div>
<div className="items"> <div className="items">
<ul className="flex flex-col space-y-6"> <ul className="flex flex-col space-y-6">
<li className="item group"> <ListItem
<NavLink title="Add Job"
to="/add-job" route="/add-job"
className={`nav-item flex items-center ${ iconName="people-two"
((navData) => (navData.isActive ? "active" : ""), sidebar={sidebar}
sidebar ? "justify-start space-x-3.5" : "justify-center") />
}`}
>
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="people-two" />
</span>
<span
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
sidebar ? "active flex-1" : "w-0"
}`}
>
Add Job
</span>
</NavLink>
</li>
</ul> </ul>
</div> </div>
</div> </div>
)} )}
</>
)}
</div> </div>
{/* signout area */} {/* signout area */}
{sidebar ? ( {sidebar ? (
@@ -526,7 +328,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
); );
} }
const ListItem = ({ sidebar, route, title, bubble }) => { const ListItem = ({ sidebar, route, title, bubble, iconName }) => {
return ( return (
<li className="item group"> <li className="item group">
<NavLink <NavLink
@@ -537,7 +339,7 @@ const ListItem = ({ sidebar, route, title, bubble }) => {
}`} }`}
> >
<span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray"> <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out bg-light-purple dark:bg-dark-light-purple rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
<Icons name="market" /> <Icons name={iconName} />
</span> </span>
<span <span
className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${ className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${