src/components/products/ProductCard.js


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
65
66
67
68
69

import Link from "../elements/Link";
import currencyFormat from "@/core/utils/currencyFormat";
import { createSlug } from "@/core/utils/slug";
import { ChevronRightIcon } from "@heroicons/react/20/solid";
import Image from "../elements/Image";


export default function ProductCard({ 
  data,
  simpleProductTitleLine = false
}) {
  let product = data;
  return (
    <div className="product-card">
      <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block relative bg-white">
        <Image 
          src={product.image}
          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 ${simpleProductTitleLine ? 'wrap-line-ellipsis-2' : '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-solid-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-solid-red">Ready Stock</div>
              <div className="badge-gray">{product.stock_total > 5 ? '> 5' : '< 5'}</div>
            </div>
          ) : ''}
        </div>
      </div>
    </div>
  )
}