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

Cards added

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-04-24 07:50:14 -04:00
parent cd9e7f4c4d
commit 1ff90991dd
2 changed files with 131 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Cards/AvailableJobsCard.jsx
+127
View File
@@ -0,0 +1,127 @@
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { toast } from "react-toastify";
import localImgLoad from "../../lib/localImgLoad";
import Icons from "../Helpers/Icons";
export default function AvailableJobsCard({
className,
datas,
hidden = false,
}) {
//debugger;
const [addFavorite, setValue] = useState(datas.whishlisted);
const [options, setOption] = useState(false);
const favoriteHandler = () => {
if (!addFavorite) {
setValue(true);
toast.success("Added to Favorite List");
} else {
setValue(false);
toast.warn("Remove to Favorite List");
}
};
return (
<div
className={`card-style-two w-full h-[426px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
className || ""
}`}
>
<div className="flex flex-col justify-between w-full h-full">
<Link to="/shop-details" className="mb-2.5">
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
{datas.title}
</h1>
</Link>
<div className="card-two-info flex justify-between items-center">
<div className="owned-by flex space-x-2 items-center">
<div>
<p className="text-thin-light-gray text-sm leading-3">Added</p>
<p className="text-base text-dark-gray dark:text-white">
{datas.offer_added}
</p>
</div>
</div>
<div className="w-[1px] bg-light-purple dark:bg-dark-light-purple h-7"></div>
<div className="created-by flex space-x-2 items-center flex-row-reverse">
<div>
<p className="text-thin-light-gray text-sm leading-3 text-right">
Expires
</p>
<p className="text-base text-dark-gray dark:text-white text-right">
{datas.expire}
</p>
</div>
</div>
</div>
<div className="thumbnail-area w-full">
<div
className="w-full h-[236px] p-6 rounded-xl overflow-hidden"
style={{
background: `url(${localImgLoad(
`images/${datas.thumbnil}`
)}) 0% 0% / cover no-repeat`,
}}
>
<div className="flex justify-center">
{datas.description}
</div>
</div>
</div>
<div className="details-area">
<div className="product-two-options flex justify-between mb-5 relative">
{/* <div className="status">*/}
{/* {datas.isActive && (*/}
{/* <span className="text-xs px-3 py-1.5 tracking-wide rounded-full bg-gold text-white">*/}
{/* Active*/}
{/*</span>*/}
{/* )}*/}
{/* </div>*/}
{/*<div className=" review flex space-x-2">*/}
{/* <button*/}
{/* onClick={favoriteHandler}*/}
{/* type="button"*/}
{/* className={`w-7 h-7 bg-white rounded-full flex justify-center items-center ${*/}
{/* addFavorite ? "text-red-500" : "text-thin-light-gray"*/}
{/* }`}*/}
{/* >*/}
{/* <Icons name="star" />*/}
{/* </button>*/}
{/*</div>*/}
</div>
<div className="flex justify-between">
<div className="flex items-center space-x-2">
<div>
<p className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white">
{datas.price*0.01}{datas.currency} | {datas.timeline_days} day(s)
</p>
<p className="text-sm text-lighter-gray">
( {datas.offer_code})
</p>
</div>
</div>
<div>
<button
type="button"
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
>
View
</button>
</div>
</div>
</div>
</div>
</div>
);
}
src/components/MarketPlace/MainSection.jsx
+4 -3
View File
@@ -1,8 +1,9 @@
import React, { useEffect, useState } from "react";
//import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo";
import DataIteration from "../Helpers/DataIteration";
import SearchCom from "../Helpers/SearchCom";
import ActiveJobsCard from "../Cards/ActiveJobsCard";
// import SearchCom from "../Helpers/SearchCom";
// import ActiveJobsCard from "../Cards/ActiveJobsCard";
import AvailableJobsCard from "../Cards/AvailableJobsCard";
export default function MainSection({ className, marketPlaceProduct }) {
const [tab, setTab] = useState("explore");
@@ -98,7 +99,7 @@ export default function MainSection({ className, marketPlaceProduct }) {
endLength={products?.length}
>
{({ datas }) => (
<ActiveJobsCard key={datas.id} datas={datas} />
<AvailableJobsCard key={datas.id} datas={datas} />
)}
</DataIteration>
</div>