From ebc09c5062cc7996b0f2aaf879062fc950c2e1c2 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 25 Jan 2023 11:17:37 +0700
Subject: Transaction detail and variant card component

---
 src/components/variants/VariantCard.js | 48 ++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/variants/VariantCard.js

(limited to 'src/components/variants/VariantCard.js')

diff --git a/src/components/variants/VariantCard.js b/src/components/variants/VariantCard.js
new file mode 100644
index 00000000..cb4d8272
--- /dev/null
+++ b/src/components/variants/VariantCard.js
@@ -0,0 +1,48 @@
+import { createSlug } from "@/core/utils/slug";
+import Image from "../elements/Image";
+import Link from "../elements/Link";
+import currencyFormat from "@/core/utils/currencyFormat";
+
+export default function VariantCard({ 
+  data,
+  openOnClick = true 
+}) {
+  let product = data;
+
+  const Card = () => (
+    <div className="flex gap-x-3">
+      <div className="w-4/12 flex items-center gap-x-2">
+        <Image
+          src={product.parent.image} 
+          alt={product.parent.name} 
+          className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md"
+        />
+      </div>
+      <div className="w-8/12 flex flex-col">
+        <p className="product-card__title wrap-line-ellipsis-2">
+          {product.parent.name}
+        </p>
+        <p className="text-caption-2 text-gray_r-11 mt-1">
+          {product.code || '-'}
+          {product.attributes.length > 0 ? ` ・ ${product.attributes.join(', ')}` : ''}
+        </p>
+        <p className="text-caption-2 text-gray_r-11 mt-1">
+          {currencyFormat(product.price.price_discount)} × {product.quantity} Barang
+        </p>
+        <p className="text-caption-2 text-gray_r-12 font-bold mt-2">
+          {currencyFormat(product.quantity * product.price.price_discount)}
+        </p>
+      </div>
+    </div>
+  );
+
+  if (openOnClick) {
+    return (
+      <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)}>
+        <Card />
+      </Link>
+    );
+  }
+
+  return <Card/>;
+}
\ No newline at end of file
-- 
cgit v1.2.3