height produk serupa di product detail

1 files changed, 89 insertions, 82 deletions

diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 39651eab..8ce6da00 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -101,63 +101,102 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
     <DesktopView>
       <div className='container mx-auto pt-10'>
         <div className='flex'>
-          <div className='w-[30%]'>
-            <Image
-              src={product.image}
-              alt={product.name}
-              className='h-96 object-contain object-center w-full border border-gray_r-4'
-            />
-          </div>
-          <div className='w-[50%] px-4'>
-            <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
-            <div className='mt-10'>
-              <div className='flex p-3'>
-                <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
-                <div className='w-3/4'>SKU-{product.id}</div>
-              </div>
-              <div className='flex p-3 bg-gray_r-4'>
-                <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
-                <div className='w-3/4'>{product.code || '-'}</div>
-              </div>
-              <div className='flex p-3'>
-                <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
-                <div className='w-3/4'>
-                  {product.manufacture?.name ? (
-                    <Link
-                      href={createSlug(
-                        '/shop/brands/',
-                        product.manufacture?.name,
-                        product.manufacture?.id
-                      )}
-                    >
-                      {product.manufacture?.name}
-                    </Link>
-                  ) : (
-                    <div>-</div>
-                  )}
+          <div className='w-full flex flex-wrap'>
+            <div className='w-5/12'>
+              <Image
+                src={product.image}
+                alt={product.name}
+                className='h-96 object-contain object-center w-full border border-gray_r-4'
+              />
+            </div>
+
+            <div className='w-7/12 px-4'>
+              <h1 className='text-title-md leading-10 font-medium'>{product?.name}</h1>
+              <div className='mt-10'>
+                <div className='flex p-3'>
+                  <div className='w-1/4 text-gray_r-12/70'>Nomor SKU</div>
+                  <div className='w-3/4'>SKU-{product.id}</div>
+                </div>
+                <div className='flex p-3 bg-gray_r-4'>
+                  <div className='w-1/4 text-gray_r-12/70'>Part Number</div>
+                  <div className='w-3/4'>{product.code || '-'}</div>
+                </div>
+                <div className='flex p-3'>
+                  <div className='w-1/4 text-gray_r-12/70'>Manufacture</div>
+                  <div className='w-3/4'>
+                    {product.manufacture?.name ? (
+                      <Link
+                        href={createSlug(
+                          '/shop/brands/',
+                          product.manufacture?.name,
+                          product.manufacture?.id
+                        )}
+                      >
+                        {product.manufacture?.name}
+                      </Link>
+                    ) : (
+                      <div>-</div>
+                    )}
+                  </div>
+                </div>
+                <div className='flex p-3 bg-gray_r-4'>
+                  <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
+                  <div className='w-3/4'>
+                    {product?.weight > 0 && <span>{product?.weight} KG</span>}
+                    {product?.weight == 0 && (
+                      <a
+                        href={whatsappUrl('productWeight', {
+                          name: product.name,
+                          url: createSlug('/shop/product/', product.name, product.id, true)
+                        })}
+                        className='text-danger-500 font-medium'
+                      >
+                        Tanya Berat
+                      </a>
+                    )}
+                  </div>
                 </div>
               </div>
-              <div className='flex p-3 bg-gray_r-4'>
-                <div className='w-1/4 text-gray_r-12/70'>Berat Barang</div>
-                <div className='w-3/4'>
-                  {product?.weight > 0 && <span>{product?.weight} KG</span>}
-                  {product?.weight == 0 && (
-                    <a
-                      href={whatsappUrl('productWeight', {
-                        name: product.name,
-                        url: createSlug('/shop/product/', product.name, product.id, true)
-                      })}
-                      className='text-danger-500 font-medium'
+            </div>
+
+            <div className='w-full'>
+              <div className='mt-12'>
+                <div className='text-h-lg font-semibold'>Informasi Produk</div>
+                <div className='flex gap-x-4 mt-6 mb-4'>
+                  {informationTabOptions.map((option) => (
+                    <TabButton
+                      value={option.value}
+                      key={option.value}
+                      active={informationTab == option.value}
+                      onClick={() => setInformationTab(option.value)}
                     >
-                      Tanya Berat
-                    </a>
-                  )}
+                      {option.label}
+                    </TabButton>
+                  ))}
+                </div>
+                <div className='flex'>
+                  <div className='w-3/4 leading-7 product__description'>
+                    <TabContent active={informationTab == 'description'}>
+                      <span
+                        dangerouslySetInnerHTML={{
+                          __html:
+                            product.description != ''
+                              ? product.description
+                              : 'Belum ada deskripsi produk.'
+                        }}
+                      />
+                    </TabContent>
+
+                    <TabContent active={informationTab == 'information'}>
+                      Belum ada informasi.
+                    </TabContent>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
 
-          <div className='w-[20%]'>
+          <div className='w-[25%]'>
             {product.variants.length > 1 && product.lowestPrice.priceDiscount > 0 && (
               <div className='text-gray_r-12/80'>Harga mulai dari: </div>
             )}
@@ -238,7 +277,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
               <div className='font-medium text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
                 Produk Serupa
               </div>
-              <div className='h-full divide-y divide-gray_r-6 max-h-52'>
+              <div className='h-full divide-y divide-gray_r-6 max-h-96'>
                 {productSimilarInBrand &&
                   productSimilarInBrand?.map((product) => (
                     <div className='py-2' key={product.id}>
@@ -327,38 +366,6 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
           </div>
         )}
 
-        <div className='mt-12'>
-          <div className='text-h-lg font-semibold'>Informasi Produk</div>
-          <div className='flex gap-x-4 mt-6 mb-4'>
-            {informationTabOptions.map((option) => (
-              <TabButton
-                value={option.value}
-                key={option.value}
-                active={informationTab == option.value}
-                onClick={() => setInformationTab(option.value)}
-              >
-                {option.label}
-              </TabButton>
-            ))}
-          </div>
-          <div className='flex'>
-            <div className='w-3/4 leading-7 product__description'>
-              <TabContent active={informationTab == 'description'}>
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html:
-                      product.description != ''
-                        ? product.description
-                        : 'Belum ada deskripsi produk.'
-                  }}
-                />
-              </TabContent>
-
-              <TabContent active={informationTab == 'information'}>Belum ada informasi.</TabContent>
-            </div>
-          </div>
-        </div>
-
         <div className='my-12'>
           <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div>
           <LazyLoad>