Added the number
This commit is contained in:
Ebube
@@ -4,16 +4,18 @@ import products from "../../data/marketplace_data.json";
|
||||
import Layout from "../Partials/Layout";
|
||||
import MainSection from "./MainSection";
|
||||
import CommonHead from "../UserHeader/CommonHead";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export default function MarketPlace(props) {
|
||||
const JobList = props.activeJobList?.result_list;
|
||||
console.log("activeJobList->",props.activeJobList.result_list);
|
||||
let { jobLists } = useSelector((state) => state.jobLists);
|
||||
const marketData = jobLists?.result_list;
|
||||
|
||||
const marketProduct = products.data;
|
||||
return (
|
||||
<>
|
||||
<Layout>
|
||||
<CommonHead />
|
||||
<MainSection marketPlaceProduct={JobList} className="mb-10" />
|
||||
<MainSection marketPlaceProduct={marketData} className="mb-10" />
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -4,9 +4,15 @@ import logo from "../../assets/images/wrenchboard.png"; //logo-2.svg";
|
||||
import logo3 from "../../assets/images/wrenchboard.png"; //logo-3.svg";
|
||||
import DarkModeContext from "../Contexts/DarkModeContext";
|
||||
import Icons from "../Helpers/Icons";
|
||||
import { useSelector } from "react-redux";
|
||||
|
||||
export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
const darkMode = useContext(DarkModeContext);
|
||||
|
||||
let { jobLists } = useSelector((state) => state.jobLists);
|
||||
const marketData = jobLists?.result_list;
|
||||
let noOfJobs = marketData?.length
|
||||
|
||||
useEffect(() => {
|
||||
const title = document.querySelectorAll(".menu-setting-items .heading");
|
||||
if (sidebar) {
|
||||
@@ -93,69 +99,14 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</div>
|
||||
<div className="items">
|
||||
<ul className="flex flex-col space-y-6">
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||
} `}
|
||||
to="/"
|
||||
>
|
||||
<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="dashboard" />
|
||||
</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"
|
||||
}`}
|
||||
>
|
||||
Dashboard
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/market"
|
||||
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="market" />
|
||||
</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"
|
||||
}`}
|
||||
>
|
||||
Market
|
||||
<span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
|
||||
0
|
||||
</span>
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/mytask"
|
||||
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="active-bids" />
|
||||
</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 Task(s)
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
{/* Using mini component reduces the bulk amount of html */}
|
||||
{[
|
||||
{ name: "Dashboard", path: "/" },
|
||||
{ name: "Market", path: "/market", bubble: noOfJobs },
|
||||
{ name: "My Task(s)", path: "/mytask" }
|
||||
].map(({ name, path, bubble }, idx) => (
|
||||
<ListItem key={idx} title={name} route={path} bubble={bubble} sidebar />
|
||||
))}
|
||||
{/*<li className="item group">*/}
|
||||
{/* <NavLink*/}
|
||||
{/* to="/notification"*/}
|
||||
@@ -216,7 +167,7 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
{/* </span>*/}
|
||||
{/* </NavLink>*/}
|
||||
{/*</li>*/}
|
||||
|
||||
|
||||
{/*<li className="item group">*/}
|
||||
{/* <NavLink*/}
|
||||
{/* to="/history"*/}
|
||||
@@ -262,22 +213,22 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</div>
|
||||
</div>
|
||||
<div className="setting-item">
|
||||
<div class="top-platform 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>
|
||||
<div class="top-platform 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>
|
||||
<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 ">
|
||||
<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">Enable Job Post</span>
|
||||
<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">
|
||||
<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">
|
||||
Enable Job Post
|
||||
</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className="setting-item">
|
||||
<div className="heading mb-5">
|
||||
@@ -287,19 +238,19 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
<ul className="flex flex-col space-y-6">
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to="/myjobs"
|
||||
className={`nav-item flex items-center ${
|
||||
((navData) => (navData.isActive ? "active" : ""),
|
||||
sidebar ? "justify-start space-x-3.5" : "justify-center")
|
||||
}`}
|
||||
to="/myjobs"
|
||||
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"
|
||||
}`}
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
List
|
||||
</span>
|
||||
@@ -307,41 +258,41 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</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")
|
||||
}`}
|
||||
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"
|
||||
}`}
|
||||
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
|
||||
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")
|
||||
}`}
|
||||
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"
|
||||
}`}
|
||||
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
|
||||
Active
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
@@ -453,3 +404,33 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ListItem = ({ sidebar, route, title, bubble }) => {
|
||||
return (
|
||||
<li className="item group">
|
||||
<NavLink
|
||||
to={route}
|
||||
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="market" />
|
||||
</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"
|
||||
}`}
|
||||
>
|
||||
{title && title}
|
||||
{bubble && (
|
||||
<span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
|
||||
{bubble}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</NavLink>
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user