<MIqdad> fix label desktop and mobile

1 files changed, 50 insertions, 18 deletions

diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx
index 76fa8298..354889e5 100644
--- a/src-migrate/modules/product-detail/components/ProductDetail.tsx
+++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx
@@ -143,6 +143,16 @@ const ProductDetail = ({ product }: Props) => {
 
   return (
     <>
+      {/* WATERMARK OVERLAY jika produk tidak punya harga */}
+      {!hasPrice && (
+        <div className='fixed inset-0 z-[5] flex items-center justify-center pointer-events-none select-none'>
+          <img
+            src='/images/nonaktif-watermark.png'
+            alt='Produk tidak tersedia'
+            className='w-[80%] max-w-[600px] opacity-10 rotate-[-25deg]'
+          />
+        </div>
+      )}
       <div className='md:flex md:flex-wrap'>
         <div className='w-full mb-4 md:mb-0 px-4 md:px-0'>
           <Breadcrumb id={product.id} name={product.name} />
@@ -250,24 +260,46 @@ const ProductDetail = ({ product }: Props) => {
             {/* <<=== TUTUP kolom kiri */}
 
             {/* ===== Kolom kanan: info ===== */}
-            <div className='md:w-8/12 px-4 md:pl-6'>
-              {!hasPrice && (
-                <div className='bg-red-50 p-2 py-1.5 rounded-lg border border-red-500 flex gap-1 items-center '>
-                  <AlertTriangle
-                    size={18}
-                    className='text-red-600 shrink-0 mx-2'
-                  />
-                  <h1 className='text-red-600 font-normal text-h-sm'>
-                    Maaf untuk saat ini Produk yang anda cari tidak tersedia
-                  </h1>
-                </div>
-              )}
-              <div className='h-6 md:h-0' />
-              <h1 className={style['title']}>{product.name}</h1>
-              <div className='h-3 md:h-0' />
-              <Information product={product} />
-              <div className='h-6' />
-            </div>
+            {isDesktop && (
+              <div className='md:w-8/12 px-4 md:pl-6'>
+                {!hasPrice && (
+                  <div className='bg-red-50 p-2 py-1.5 rounded-lg border border-red-500 flex gap-1 items-center '>
+                    <AlertTriangle
+                      size={18}
+                      className='text-red-600 shrink-0 mx-2'
+                    />
+                    <h1 className='text-red-600 font-normal text-h-sm'>
+                      Maaf untuk saat ini Produk yang anda cari tidak tersedia
+                    </h1>
+                  </div>
+                )}
+                <div className='h-6 md:h-0' />
+                <h1 className={style['title']}>{product.name}</h1>
+                <div className='h-3 md:h-0' />
+                <Information product={product} />
+                <div className='h-6' />
+              </div>
+            )}
+            {isMobile && (
+              <div className='md:w-8/12 px-4 md:pl-6 relative'>
+                {!hasPrice && (
+                  <div className='bg-red-50 p-2 py-1.5 border-b border-red-500 flex gap-1 items-center w-screen relative left-1/2 right-1/2 -translate-x-1/2'>
+                    <AlertTriangle
+                      size={18}
+                      className='text-red-600 shrink-0 mx-2'
+                    />
+                    <h1 className='text-red-600 font-normal text-h-sm'>
+                      Maaf untuk saat ini Produk yang anda cari tidak tersedia
+                    </h1>
+                  </div>
+                )}
+                <div className='h-6 md:h-0' />
+                <h1 className={style['title']}>{product.name}</h1>
+                <div className='h-3 md:h-0' />
+                <Information product={product} />
+                <div className='h-6' />
+              </div>
+            )}
           </div>
 
           <div className='h-full'>