blob: b8967cc8898236911d42d6adc5262ff72f0e7c58 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
import Link from "./Link";
import currencyFormat from "../helpers/currencyFormat";
import { createSlug } from "../helpers/slug";
import { LazyLoadImage } from "react-lazy-load-image-component";
import { ChevronRightIcon } from "@heroicons/react/20/solid";
import 'react-lazy-load-image-component/src/effects/blur.css';
export default function ProductCard({ data }) {
let product = data;
return (
<div className="product-card">
<Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block relative bg-white">
<LazyLoadImage effect="blur" src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" />
{product.variant_total > 1 ? (
<div className="absolute bottom-2 left-2 badge-gray">{product.variant_total} Varian</div>
) : ''}
</Link>
<div className="product-card__content">
<div>
{typeof product.manufacture.name !== "undefined" ? (
<Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</Link>
) : (
<span className="product-card__brand">-</span>
)}
<Link href={'/shop/product/' + createSlug(product.name, product.id)} className="product-card__title wrap-line-ellipsis-3">
{product.name}
</Link>
</div>
<div className="mt-2">
{product.lowest_price.discount_percentage > 0 ? (
<div className="flex gap-x-1 items-center mb-1">
<p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
<span className="badge-red">{product.lowest_price.discount_percentage}%</span>
</div>
) : ''}
{product.lowest_price.price_discount > 0 ? (
<p className="text-caption-1 text-gray_r-12 font-bold">
{currencyFormat(product.lowest_price.price_discount)}
</p>
) : (
<a
href="https://wa.me"
target="_blank"
rel="noreferrer"
className="flex items-center gap-x-1 text-caption-1"
>
Tanya Harga <ChevronRightIcon className="text-yellow_r-11 w-5 h-5" />
</a>
)}
{product.stock_total > 0 ? (
<div className="flex gap-x-1 mt-2">
<div className="badge-green">Ready Stock</div>
<div className="badge-gray">{product.stock_total > 5 ? '> 5' : '< 5'}</div>
</div>
) : ''}
</div>
</div>
</div>
)
}
|
