victorAnumudu
76 lines
2.5 KiB
React
76 lines
2.5 KiB
React
import React, { useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { toast } from "react-toastify";
|
|
|
|
export default function ProductCardStyleTwo({
|
|
className,
|
|
datas,
|
|
hidden = false,
|
|
bg
|
|
}) {
|
|
// 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-[336px] p-[20px] bg-white dark:bg-dark-white rounded-2xl section-shadow ${
|
|
className || ""
|
|
}`}
|
|
>
|
|
<div className="flex flex-col justify-between w-full h-full">
|
|
<div className="thumbnail-area w-full">
|
|
<div
|
|
className="w-full h-[236px] p-6 rounded-xl overflow-hidden"
|
|
style={{
|
|
// background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
|
|
background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
|
|
}}
|
|
>
|
|
<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>
|
|
{hidden && <div className="flex justify-center"></div>}
|
|
</div>
|
|
</div>
|
|
<div className="details-area">
|
|
{/* title */}
|
|
<a href={datas.guid} target="_blank" className="mb-2.5" rel="noreferrer">
|
|
<h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
|
|
{datas.post_title || "dummy title..."}
|
|
</h1>
|
|
</a>
|
|
<div className="flex justify-between">
|
|
<div className="flex items-center space-x-2"></div>
|
|
<div className="my-1">
|
|
<a
|
|
href={datas.guid}
|
|
target="_blank"
|
|
className="px-4 py-2.5 text-white text-sm bg-pink rounded-full tracking-wide"
|
|
rel="noreferrer"
|
|
>
|
|
View
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|