manage layout accnt type and fixed width of table
This commit is contained in:
Ebube
@@ -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"
|
||||||
|
|||||||
@@ -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]+" },
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -82,172 +82,126 @@ 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 ? (
|
||||||
<NavLink
|
<div className="menu-setting-items mb-11">
|
||||||
to="/start-job"
|
{/* menus item */}
|
||||||
className="nav-item flex items-center justify-start space-x-3.5"
|
<div
|
||||||
>
|
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
|
||||||
<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">
|
sidebar ? "mb-14" : "rounded-none p-0"
|
||||||
Enable Job Post
|
}`}
|
||||||
</span>
|
>
|
||||||
</NavLink>
|
<div className="items">
|
||||||
</div>
|
<div className="heading mb-5">
|
||||||
</div>
|
<h1 className="title text-xl font-bold text-purple">
|
||||||
) : jobLists?.result_list?.length ? (
|
Job Post
|
||||||
<div className="setting-item">
|
</h1>
|
||||||
<div className="heading mb-5">
|
</div>
|
||||||
<h1 className="title text-xl font-bold text-purple">My Jobs</h1>
|
<ul className="flex flex-col space-y-6">
|
||||||
</div>
|
<li className="item group">
|
||||||
<div className="items">
|
<NavLink
|
||||||
<ul className="flex flex-col space-y-6">
|
to="/start-job"
|
||||||
<li className="item group">
|
className={`nav-item flex items-center ${
|
||||||
<NavLink
|
((navData) => (navData.isActive ? "active" : ""),
|
||||||
to="/myjobs"
|
sidebar
|
||||||
className="nav-item flex items-center justify-start space-x-3.5"
|
? "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">
|
}`}
|
||||||
<Icons name="people-two" />
|
>
|
||||||
</span>
|
<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-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium active flex-1">
|
<Icons name="people-two" />
|
||||||
My Jobs
|
</span>
|
||||||
</span>
|
<span
|
||||||
</NavLink>
|
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
||||||
</li>
|
sidebar ? "active flex-1" : "w-0"
|
||||||
<li className="item group">
|
}`}
|
||||||
<NavLink
|
>
|
||||||
to="/my-active-jobs"
|
Enable Job Post
|
||||||
className="nav-item flex items-center justify-start space-x-3.5"
|
</span>
|
||||||
>
|
</NavLink>
|
||||||
<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">
|
</li>
|
||||||
<Icons name="setting" />
|
</ul>
|
||||||
</span>
|
</div>
|
||||||
<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">
|
</div>
|
||||||
Pending
|
</div>
|
||||||
</span>
|
) : jobLists?.result_list?.length ? (
|
||||||
</NavLink>
|
<div className="setting-item">
|
||||||
</li>
|
<div className="heading mb-5">
|
||||||
<li className="item group">
|
<h1 className="title text-xl font-bold text-purple">
|
||||||
<NavLink
|
My Jobs
|
||||||
to="/my-active-jobs"
|
</h1>
|
||||||
className="nav-item flex items-center justify-start space-x-3.5"
|
</div>
|
||||||
>
|
<div className="items">
|
||||||
<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">
|
<ul className="flex flex-col space-y-6">
|
||||||
<Icons name="setting" />
|
{[
|
||||||
</span>
|
{ name: "List", path: "/myjobs", 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 active flex-1">
|
{
|
||||||
Active Job(s)
|
name: "Pending",
|
||||||
</span>
|
path: "/my-pending-jobs",
|
||||||
</NavLink>
|
iconName: "people-two",
|
||||||
</li>
|
},
|
||||||
</ul>
|
{
|
||||||
</div>
|
name: "Active",
|
||||||
</div>
|
path: "/my-active-jobs",
|
||||||
) : (
|
iconName: "people-two",
|
||||||
<div className="setting-item">
|
},
|
||||||
<div className="heading mb-5">
|
].map(({ name, path, iconName }, idx) => (
|
||||||
<h1 className="title text-xl font-bold text-purple">My Jobs</h1>
|
<ListItem
|
||||||
</div>
|
key={idx}
|
||||||
<div className="items">
|
title={name}
|
||||||
<ul className="flex flex-col space-y-6">
|
route={path}
|
||||||
<li className="item group">
|
sidebar={sidebar}
|
||||||
<NavLink
|
iconName={iconName}
|
||||||
to="/add-job"
|
/>
|
||||||
className="nav-item flex items-center justify-start space-x-3.5"
|
))}
|
||||||
>
|
</ul>
|
||||||
<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">
|
</div>
|
||||||
<Icons name="people-two" />
|
</div>
|
||||||
</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">
|
<div className="setting-item">
|
||||||
My Jobs
|
<div className="heading mb-5">
|
||||||
</span>
|
<h1 className="title text-xl font-bold text-purple">
|
||||||
</NavLink>
|
My Jobs
|
||||||
</li>
|
</h1>
|
||||||
</ul>
|
</div>
|
||||||
</div>
|
<div className="items">
|
||||||
</div>
|
<ul className="flex flex-col space-y-6">
|
||||||
|
<ListItem
|
||||||
|
title="Add Job"
|
||||||
|
route="/add-job"
|
||||||
|
iconName="people-two"
|
||||||
|
sidebar={sidebar}
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{/* signout area */}
|
{/* signout area */}
|
||||||
|
|||||||
+131
-329
@@ -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,185 +104,69 @@ 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 */}
|
||||||
<div className="menu-setting-items mb-11">
|
{userDetails?.account_type !== "family" && (
|
||||||
{/* menus item */}
|
<div className="menu-setting-items mb-11">
|
||||||
<div className={`menu-item transition-all duration-300 ease-in-out ${
|
{/* menus item */}
|
||||||
sidebar ? "mb-14" : ""
|
<div
|
||||||
}`}>
|
className={`menu-item transition-all duration-300 ease-in-out ${
|
||||||
{/* <div className="heading mb-5 bg-dark-blue rounded-2xl p-2 2xl:w-[180px] w-full 2xl:mb-10 2xl:border-none border">
|
sidebar ? "mb-14" : ""
|
||||||
<NavLink to="/acc-family">
|
}`}
|
||||||
<h1 className="title text-xl font-bold text-purple">
|
>
|
||||||
Family Corner
|
<div className="items">
|
||||||
</h1>
|
|
||||||
</NavLink>
|
|
||||||
</div> */}
|
|
||||||
<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" && (
|
||||||
|
<>
|
||||||
<div className="menu-setting-items mb-11">
|
{!userDetails?.post_jobs ? (
|
||||||
{/* menus item */}
|
<div className="menu-setting-items mb-11">
|
||||||
<div className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
|
{/* menus item */}
|
||||||
sidebar ? "mb-14" : "rounded-none p-0"
|
<div
|
||||||
}`}>
|
className={`menu-item transition-all duration-300 ease-in-out bg-pink dark:bg-dark-white rounded-2xl p-3 ${
|
||||||
{/* <div className="setting-item">
|
sidebar ? "mb-14" : "rounded-none p-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{/* <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">
|
||||||
<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">
|
<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">
|
||||||
@@ -290,175 +175,92 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
|||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
|
<ul className="flex flex-col space-y-6">
|
||||||
|
<li className="item group">
|
||||||
|
<NavLink
|
||||||
|
to="/start-job"
|
||||||
|
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"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Enable Job Post
|
||||||
|
</span>
|
||||||
|
</NavLink>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<ul className="flex flex-col space-y-6">
|
|
||||||
<li className="item group">
|
|
||||||
<NavLink
|
|
||||||
to="/start-job"
|
|
||||||
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"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Enable Job Post
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : jobLists?.result_list?.length ? (
|
||||||
</div>
|
<div className="setting-item">
|
||||||
) : jobLists?.result_list?.length ? (
|
<div className="heading mb-5">
|
||||||
<div className="setting-item">
|
<h1 className="title text-xl font-bold text-purple">
|
||||||
<div className="heading mb-5">
|
My Jobs
|
||||||
<h1 className="title text-xl font-bold text-purple">My Jobs</h1>
|
</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
|
</ul>
|
||||||
to="/my-pending-jobs"
|
</div>
|
||||||
className={`nav-item flex items-center ${
|
</div>
|
||||||
((navData) => (navData.isActive ? "active" : ""),
|
) : (
|
||||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
<div className="setting-item">
|
||||||
}`}
|
<div className="heading mb-5">
|
||||||
>
|
<h1 className="title text-xl font-bold text-purple">
|
||||||
<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">
|
My Jobs
|
||||||
<Icons name="people-two" />
|
</h1>
|
||||||
</span>
|
</div>
|
||||||
<span
|
<div className="items">
|
||||||
className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
|
<ul className="flex flex-col space-y-6">
|
||||||
sidebar ? "active flex-1" : "w-0"
|
<ListItem
|
||||||
}`}
|
title="Add Job"
|
||||||
>
|
route="/add-job"
|
||||||
Pending
|
iconName="people-two"
|
||||||
</span>
|
sidebar={sidebar}
|
||||||
</NavLink>
|
/>
|
||||||
</li>
|
</ul>
|
||||||
<li className="item group">
|
</div>
|
||||||
<NavLink
|
</div>
|
||||||
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>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="setting-item">
|
|
||||||
<div className="heading mb-5">
|
|
||||||
<h1 className="title text-xl font-bold text-purple">My Jobs</h1>
|
|
||||||
</div>
|
|
||||||
<div className="items">
|
|
||||||
<ul className="flex flex-col space-y-6">
|
|
||||||
<li className="item group">
|
|
||||||
<NavLink
|
|
||||||
to="/add-job"
|
|
||||||
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"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Add Job
|
|
||||||
</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{/* signout area */}
|
{/* signout area */}
|
||||||
@@ -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 ${
|
||||||
|
|||||||
Reference in New Issue
Block a user