Update add to wishlist in product detail

2 files changed, 8 insertions, 1 deletions

diff --git a/src-migrate/modules/product-card/components/ProductCard.tsx b/src-migrate/modules/product-card/components/ProductCard.tsx
index c8a0b701..0a97b344 100644
--- a/src-migrate/modules/product-card/components/ProductCard.tsx
+++ b/src-migrate/modules/product-card/components/ProductCard.tsx
@@ -26,7 +26,7 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
       [style['wrapper-h']]: layout === 'horizontal',
     })}
     >
-      <div className={clsxm({
+      <div className={clsxm('relative', {
         [style['image-v']]: layout === 'vertical',
         [style['image-h']]: layout === 'horizontal',
       })}>
@@ -38,6 +38,9 @@ const ProductCard = ({ product, layout = 'vertical' }: Props) => {
             height={128}
             className='object-contain object-center h-full w-full'
           />
+          {product.variant_total > 1 && (
+            <div className={style['variant-badge']}>{product.variant_total} Varian</div>
+          )}
         </Link>
       </div>
 
diff --git a/src-migrate/modules/product-card/styles/product-card.module.css b/src-migrate/modules/product-card/styles/product-card.module.css
index aac27a84..653bf2ca 100644
--- a/src-migrate/modules/product-card/styles/product-card.module.css
+++ b/src-migrate/modules/product-card/styles/product-card.module.css
@@ -48,3 +48,7 @@
 .sold {
     @apply text-gray-600 text-[11px];
 }
+
+.variant-badge {
+    @apply bg-gray-500/20 backdrop-blur-md absolute rounded-md bottom-2 left-2 px-2 py-1 text-caption-2;
+}