DESKTOP-GBA0BK8\Admin
128 lines
5.4 KiB
React
128 lines
5.4 KiB
React
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 ActiveJobsCard({
|
|
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>
|
|
);
|
|
}
|