From 26112cc5e7f72e1629c8d122abd38ff8b94fabd3 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Wed, 22 Oct 2025 15:21:55 +0700
Subject: <Miqdad> try

---
 src/lib/product/components/ProductCard.jsx | 64 +++++++++++-------------------
 1 file changed, 23 insertions(+), 41 deletions(-)

(limited to 'src')

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 8a1c611c..814ae62d 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -375,7 +375,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                 </div>
               </div>
 
-              {/* BADGE DISKON KIRI-ATAS (tetap seperti punyamu) */}
+              {/* BADGE DISKON KIRI-ATAS */}
               {(product?.lowestPrice?.discountPercentage ?? 0) > 0 && (
                 <div className='absolute left-0 top-5 sm:top-5 z-30 translate-y-5 sm:translate-y-5'>
                   <div className='bg-red-600 text-white px-2 py-1 rounded-r-lg shadow-sm text-xs font-bold leading-none'>
@@ -396,28 +396,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
                     />
                   </div>
                   <div className='relative'>
-                    {/* Old */}
-                    {/* <div className='flex gap-x-1 items-center p-2 justify-center'>
-              <div className='bg-yellow-400 rounded-lg p-1 h-6 w-19 flex items-center justify-center '>
-                <span className='text-sm font-bold text-black'>
-                  {Math.floor(product?.lowestPrice.discountPercentage)}%
-                </span>
-              </div>
-              <div className='bg-red-600 border border-solid border-yellow-400 p-2 rounded-full h-6 flex w-fit items-center justify-center gap-x-2'>
-                <ImageNext
-                  src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
-                  alt='flash sale'
-                  width={13}
-                  height={5}
-                  loading='eager'
-                />
-                <span className='text-white text-[9px] md:text-[10px] font-semibold'>
-                  {product?.flashSale?.tag != 'false' || product?.flashSale?.tag
-                    ? product?.flashSale?.tag
-                    : 'FLASH SALE'}
-                </span>
-              </div>
-            </div> */}
+                    {/* (konten lama dikomentari) */}
                   </div>
                 </div>
               )}
@@ -428,7 +407,8 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               )}
             </Link>
 
-            <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5'>
+            {/* ⬇️ min-w-0 agar anak flex boleh wrap */}
+            <div className='p-2 sm:p-3 pb-3 text-caption-2 sm:text-body-2 leading-5 min-w-0'>
               <div className='flex justify-between '>
                 {product?.manufacture?.name ? (
                   <Link
@@ -461,19 +441,19 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
               {product?.flashSale?.id > 0 &&
               product?.lowestPrice.discountPercentage > 0 ? (
                 <>
-                  <div className='flex gap-x-1 mb-1 items-center'>
-                    <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2'>
+                  {/* ⬇️ izinkan wrap supaya tidak overflow */}
+                  <div className='flex flex-wrap gap-x-2 mb-1 items-center min-w-0'>
+                    <div className='text-gray_r-11 line-through text-[11px] sm:text-caption-2 whitespace-nowrap'>
                       {currencyFormat(product.lowestPrice.price)}
                     </div>
-                    {/* <div className='badge-solid-red'>
-                      {Math.floor(product?.lowestPrice.discountPercentage)}%
-                    </div> */}
                   </div>
-                  <div className='text-danger-500 font-semibold mb-2'>
+
+                  {/* ⬇️ harga & PPN boleh pindah baris */}
+                  <div className='text-danger-500 font-semibold mb-2 whitespace-normal break-all leading-tight overflow-visible text-clip'>
                     {product?.lowestPrice.priceDiscount > 0 ? (
                       <>
                         {currencyFormat(product?.lowestPrice.priceDiscount)}
-                        <div className='text-gray_r-9 text-[10px] font-normal mt-2'>
+                        <div className='text-gray_r-9 text-[10px] font-normal mt-1 whitespace-normal break-all leading-tight'>
                           Include PPN:{' '}
                           {currencyFormat(
                             product.lowestPrice.priceDiscount *
@@ -521,11 +501,12 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
               {discount > 0 && (product?.flashSale?.id ?? 0) < 1 && (
                 <div className='mt-1 mb-1'>
-                  <div className='inline-flex items-center gap-2 text-green-600'>
-                    <span className='text-[9pt] font-semibold'>Voucher</span>
-                    <span className='inline-flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0'>
-                      <TicketIcon className='h-3.5 w-3.5' />
-                      <span className='text-sm font-extrabold tabular-nums'>
+                  {/* ⬇️ gunakan flex-wrap & min-w-0 */}
+                  <div className='flex flex-wrap items-center gap-2 text-green-600 min-w-0 mb-2'>
+                    <span className='text-xs font-medium'>Voucher</span>
+                    <span className='inline-flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0 max-w-full'>
+                      <TicketIcon className='h-3.5 w-3.5 shrink-0' />
+                      <span className='text-xs font-medium tabular-nums break-all'>
                         {currencyFormat(discount)}
                       </span>
                     </span>
@@ -705,11 +686,12 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
 
           {discount > 0 && (product?.flashSale?.id ?? 0) < 1 && (
             <div className='mt-1 mb-1'>
-              <div className='inline-flex items-center gap-2 text-green-600'>
-                <span className='text-[9pt] font-semibold'>Voucher</span>
-                <span className='inline-flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0'>
-                  <TicketIcon className='h-3.5 w-3.5' />
-                  <span className='text-sm font-extrabold tabular-nums'>
+              {/* ⬇️ gunakan flex-wrap & min-w-0 */}
+              <div className='flex flex-wrap items-center gap-2 text-green-600 min-w-0 mb-2'>
+                <span className='text-xs font-medium'>Voucher</span>
+                <span className='inline-flex items-center gap-1.5 rounded bg-green-50 px-2.5 py-0.5 ring-0 max-w-full'>
+                  <TicketIcon className='h-3.5 w-3.5 shrink-0' />
+                  <span className='text-xs font-medium tabular-nums break-all'>
                     {currencyFormat(discount)}
                   </span>
                 </span>
-- 
cgit v1.2.3