From 4f7ef327e06cfba8e68f7e31f969ec15f8d3b375 Mon Sep 17 00:00:00 2001
From: Miqdad <ahmadmiqdad27@gmail.com>
Date: Tue, 28 Oct 2025 22:39:49 +0700
Subject: <Miqdad> styling

---
 .../components/Product/ProductMobileVariant.jsx    | 36 +++++++++++++---------
 .../product/styles/desc_mobile_variant.module.css  | 18 +++++++++++
 2 files changed, 39 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/product/styles/desc_mobile_variant.module.css

(limited to 'src')

diff --git a/src/lib/product/components/Product/ProductMobileVariant.jsx b/src/lib/product/components/Product/ProductMobileVariant.jsx
index d3d22d80..1d461382 100644
--- a/src/lib/product/components/Product/ProductMobileVariant.jsx
+++ b/src/lib/product/components/Product/ProductMobileVariant.jsx
@@ -19,6 +19,7 @@ import whatsappUrl from '@/core/utils/whatsappUrl';
 import { getAuth } from '~/libs/auth';
 import SimilarBottom from '~/modules/product-detail/components/SimilarBottom';
 import ProductSimilar from '../ProductSimilar';
+import styles from '../../styles/desc_mobile_variant.module.css';
 
 const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
   const router = useRouter();
@@ -175,12 +176,14 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
     };
     fetchData();
   }, [product]);
+  console.log(product);
+  console.log(product.parent.description);
 
   return (
     <MobileView>
       {/* PRICE & ACTIONS: tetap punyamu, hanya hapus input number lama */}
       {/* ===== BAR BAWAH (fixed) ===== */}
-      <div className='px-4 fixed bottom-0 left-0 right-0 bg-white z-10 pb-6 pt-4 rounded-t-2xl shadow-[rgba(0,0,4,0.1)_0px_-4px_4px_0px]'>
+      <div className='p-3 fixed gap-x-2 bottom-0 left-0 right-0 bg-white z-10 pb-6 pt-4 rounded-t-2xl shadow-[rgba(0,0,4,0.1)_0px_-4px_4px_0px]'>
         {/* HARGA & PPN (logikamu tetap) */}
         {activeVariant.isFlashSale &&
         activeVariant?.price?.discountPercentage > 0 ? (
@@ -196,7 +199,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
                 {currencyFormat(activeVariant?.price?.priceDiscount)}
               </div>
             </div>
-            <div className='text-gray_r-9 text-base font-normal mt-1'>
+            <div className='text-md text-gray-500 shadow-0 mt-1'>
               Termasuk PPN:{' '}
               {currencyFormat(
                 activeVariant?.price.priceDiscount * process.env.NEXT_PUBLIC_PPN
@@ -204,11 +207,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
             </div>
           </>
         ) : (
-          <div className='text-danger-500 font-semibold mt-1 text-3xl'>
+          <div className='text-danger-500 font-semibold mt-1 text-title-sm'>
             {activeVariant?.price?.price > 0 ? (
               <>
                 {currencyFormat(activeVariant?.price?.price)}
-                <div className='text-gray_r-9 text-base font-normal mt-1'>
+                <div className='text-sm text-gray-500 shadow-0 mt-1'>
                   Termasuk PPN:{' '}
                   {currencyFormat(
                     activeVariant?.price.price * process.env.NEXT_PUBLIC_PPN
@@ -238,7 +241,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
         )}
 
         {/* ⬇️ TAMBAHKAN BLOK INI DI DALAM BAR: STOK & STEPPER */}
-        <div className='grid grid-cols-12 items-center gap-3 mt-3'>
+        <div className='grid grid-cols-12 items-center gap-3'>
           <div className='col-span-7'>
             <div
               className={`text-[14px] ${
@@ -329,7 +332,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
               colorScheme='red'
               isDisabled={product.stock === 0}
             >
-              Beli
+              Beli Sekarang
             </Button>
           </div>
         </div>
@@ -491,11 +494,11 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
 
         <TabContent
           active={informationTab == 'description'}
-          className='leading-6 text-gray_r-11'
+          className={`${styles.richtextHtml} leading-6 text-gray_r-11`}
           dangerouslySetInnerHTML={{
             __html:
-              product.description != ''
-                ? product.description
+              product.parent.description != ''
+                ? product.parent.description
                 : 'Belum ada deskripsi produk.',
           }}
         />
@@ -556,7 +559,7 @@ const ProductMobileVariant = ({ product, wishlist, toggleWishlist }) => {
 
 const informationTabOptions = [
   { value: 'specification', label: 'Spesifikasi' },
-  // { value: 'description', label: 'Deskripsi' },
+  { value: 'description', label: 'Deskripsi' },
   // { value: 'information', label: 'Info Penting' }
 ];
 
@@ -575,11 +578,14 @@ const TabButton = ({ children, active, ...props }) => {
   );
 };
 
-const TabContent = ({ children, active, className, ...props }) => (
-  <div {...props} className={`${active ? 'block' : 'hidden'} ${className}`}>
-    {children}
-  </div>
-);
+const TabContent = ({ children, active, className = '', ...props }) => {
+  if (!active) return null; // <— jangan render kalau tidak aktif
+  return (
+    <div {...props} className={className}>
+      {children}
+    </div>
+  );
+};
 
 const SpecificationContent = ({ children, label }) => (
   <div className='flex justify-between p-3'>
diff --git a/src/lib/product/styles/desc_mobile_variant.module.css b/src/lib/product/styles/desc_mobile_variant.module.css
new file mode 100644
index 00000000..d2c86d77
--- /dev/null
+++ b/src/lib/product/styles/desc_mobile_variant.module.css
@@ -0,0 +1,18 @@
+.richtextHtml {
+    line-height: 1.7;
+    /* word-break: break-word; */
+    overflow-x: auto;
+}
+.richtextHtml h1 {
+    font-weight: 600;
+    margin: 0.5rem 0;
+    font-size: clamp(1.5rem, 2.5vw, 2rem);
+    line-height: 1.25;
+}
+.richtextHtml table {
+    width: 100%;
+    max-width: 100%;
+    border-collapse: collapse;
+    table-layout: auto;
+    margin: 12px 0;
+}
-- 
cgit v1.2.3