1 files changed, 39 insertions, 4 deletions
diff --git a/src/components/variants/VariantCard.js b/src/components/variants/VariantCard.js
index cb4d8272..2d27371b 100644
--- a/src/components/variants/VariantCard.js
+++ b/src/components/variants/VariantCard.js
@@ -2,12 +2,27 @@ import { createSlug } from "@/core/utils/slug";
 import Image from "../elements/Image";
 import Link from "../elements/Link";
 import currencyFormat from "@/core/utils/currencyFormat";
+import { useRouter } from "next/router";
+import { toast } from "react-hot-toast";
+import { createOrUpdateItemCart } from "@/core/utils/cart";
 
 export default function VariantCard({ 
   data,
-  openOnClick = true 
+  openOnClick = true, 
+  buyMore = false
 }) {
   let product = data;
+  const router = useRouter();
+
+  const addItemToCart = () => {
+    toast.success('Berhasil menambahkan ke keranjang', { duration: 1500 });
+    createOrUpdateItemCart(product.id, 1);
+    return;
+  };
+  
+  const checkoutItem = () => {
+    router.push(`/shop/checkout?product_id=${product.id}&qty=${product.quantity}`);
+  }
 
   const Card = () => (
     <div className="flex gap-x-3">
@@ -38,9 +53,29 @@ export default function VariantCard({
 
   if (openOnClick) {
     return (
-      <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)}>
-        <Card />
-      </Link>
+      <>
+        <Link href={'/shop/product/' + createSlug(product.parent.name, product.parent.id)}>
+          <Card />
+        </Link>
+        { buyMore && (
+          <div className="flex justify-end gap-x-2 mb-2">
+            <button 
+              type="button" 
+              onClick={addItemToCart} 
+              className="btn-yellow text-gray_r-12 py-2 px-3"
+            >
+              Tambah Keranjang
+            </button>
+            <button 
+              type="button" 
+              onClick={checkoutItem} 
+              className="btn-solid-red py-2 px-3"
+            >
+              Beli Lagi
+            </button>
+          </div>
+        ) }
+      </>
     );
   }