add image backgournd

1 files changed, 47 insertions, 27 deletions

diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index 9e559358..d33516dd 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -7,14 +7,25 @@ import whatsappUrl from '@/core/utils/whatsappUrl'
 import ImageNext from 'next/image'
 import Product from './Product/Product'
 import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import odooApi from '@/core/api/odooApi'
 
 const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
   const router = useRouter()
-  console.log('ini route', router)
+  
+  const [backgorundFlashSale, setBackgorundFlashSale] = useState(null)
+  
   const callForPriceWhatsapp = whatsappUrl('product', {
     name: product.name,
     url: createSlug('/shop/product/', product.name, product.id, true)
   })
+  useEffect(() => {
+    const getBackgound = async () => {
+      const get = await odooApi('GET', '/api/v1/banner?type=flash-sale-background-banner')
+      setBackgorundFlashSale(get[0].image)
+    }
+    getBackgound()
+  }, [])
 
   if (variant == 'vertical') {
     return (
@@ -29,18 +40,27 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
             className='w-full object-contain object-center h-36 sm:h-48'
           />
           {router.pathname != '/' && product?.flashSale?.id > 0 && (
-            <div className='absolute bottom-0 bg-red-600 w-full h-10 grid'>
-              <div className='flex gap-x-1 items-center p-2 justify-center'>
-                <div className='bg-yellow-400 rounded-full p-1 h-6 w-19 flex items-center justify-center '>
-                  <span className='text-sm font-bold text-black'>{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'
-                    width={13}
-                    height={5}
-                  />
-                  <span className='text-white text-[11px] font-semibold'>{product?.flashSale?.tag}</span>
+            <div className='absolute bottom-0 w-full grid'>
+              <div className='absolute bottom-0 w-full h-full'>
+                <ImageNext src='/images/GAMBAR-BG-FLASH-SALE.jpg' className='h-full' width={1000} height={100} />
+              </div>
+              <div className='relative'>
+                <div className='flex gap-x-1 items-center p-2 justify-center'>
+                  <div className='bg-yellow-400 rounded-full p-1 h-6 w-19 flex items-center justify-center '>
+                    <span className='text-sm font-bold text-black'>
+                      {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'
+                      width={13}
+                      height={5}
+                    />
+                    <span className='text-white text-[11px] font-semibold'>
+                      {product?.flashSale?.tag}
+                    </span>
+                  </div>
                 </div>
               </div>
             </div>
@@ -52,20 +72,20 @@ 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'>
-            {product?.manufacture?.name ? (
-              <Link
-                href={createSlug(
-                  '/shop/brands/',
-                  product?.manufacture?.name,
-                  product?.manufacture.id
-                )}
-                className='mb-1'
-              >
-                {product.manufacture.name}
-              </Link>
-            ) : (
-              <div>-</div>
-            )}
+          {product?.manufacture?.name ? (
+            <Link
+              href={createSlug(
+                '/shop/brands/',
+                product?.manufacture?.name,
+                product?.manufacture.id
+              )}
+              className='mb-1'
+            >
+              {product.manufacture.name}
+            </Link>
+          ) : (
+            <div>-</div>
+          )}
           <Link
             href={createSlug('/shop/product/', product?.name, product?.id)}
             className={`mb-2 !text-gray_r-12 leading-6 block ${