Update filename

1 files changed, 39 insertions, 0 deletions

diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
new file mode 100644
index 00000000..f51473ad
--- /dev/null
+++ b/src/components/ProductCard.js
@@ -0,0 +1,39 @@
+import Link from "next/link";
+import currencyFormat from "../helpers/currencyFormat";
+import { createSlug } from "../helpers/slug";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+
+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">
+        <LazyLoadImage effect="blur" src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" />
+      </Link>
+      <div className="product-card__description">
+        <div>
+          {typeof product.manufacture.name !== undefined ? (
+            <a href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</a>
+          ) : (
+            <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>
+          {product.lowest_price.discount_percentage > 0 ? (
+            <div className="flex gap-x-1 items-center mt-2">
+              <span className="badge-yellow">{product.lowest_price.discount_percentage}%</span>
+              <p className="text-xs text-gray-800 line-through">{currencyFormat(product.lowest_price.price)}</p>
+            </div>
+          ) : ''}
+          <p className="text-sm text-gray-900 font-semibold">{product.lowest_price.price_discount > 0 ? currencyFormat(product.lowest_price.price_discount) : 'Tanya harga'}</p>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file