diff options
| author | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-09-01 09:36:52 +0700 |
|---|---|---|
| committer | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-09-01 09:36:52 +0700 |
| commit | dfdeedf7141c9191952bdb3005e2e91d2a495044 (patch) | |
| tree | 2abb9a8090306791a76069baff6c91c5e151d3b5 /src/lib/product/components/ProductCard.jsx | |
| parent | 57540da51be35b2d0a90f1d64b097fc4da608a25 (diff) | |
| parent | 7356bcc0d1b7bac8d05ac315fdcf2a46b3996e91 (diff) | |
Merge branch 'master' into Feature/google_sign_up
# Conflicts:
# src/core/components/elements/Navbar/NavbarDesktop.jsx
Diffstat (limited to 'src/lib/product/components/ProductCard.jsx')
| -rw-r--r-- | src/lib/product/components/ProductCard.jsx | 42 |
1 files changed, 41 insertions, 1 deletions
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx index a8964310..2c849bd6 100644 --- a/src/lib/product/components/ProductCard.jsx +++ b/src/lib/product/components/ProductCard.jsx @@ -3,8 +3,12 @@ import Link from '@/core/components/elements/Link/Link' import currencyFormat from '@/core/utils/currencyFormat' import { createSlug } from '@/core/utils/slug' import whatsappUrl from '@/core/utils/whatsappUrl' +import ImageNext from 'next/image' +import { useRouter } from 'next/router' const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { + const router = useRouter() + const callForPriceWhatsapp = whatsappUrl('product', { name: product.name, url: createSlug('/shop/product/', product.name, product.id, true) @@ -12,7 +16,7 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { if (variant == 'vertical') { return ( - <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[350px]'> + <div className='rounded shadow-sm border border-gray_r-4 bg-white h-[300px] md:h-[350px]'> <Link href={createSlug('/shop/product/', product?.name, product?.id)} className='border-b border-gray_r-4 relative' @@ -22,6 +26,32 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { alt={product?.name} className='w-full object-contain object-center h-36 sm:h-48' /> + {router.pathname != '/' && product?.flashSale?.id > 0 && ( + <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 != "false" || product?.flashSale?.tag != product?.flashSale?.tag ? product?.flashSale?.tag : 'FLASH SALE'} + </span> + </div> + </div> + </div> + </div> + )} {product.variantTotal > 1 && ( <div className='absolute badge-gray bottom-1.5 left-1.5'> {product.variantTotal} Varian @@ -101,6 +131,16 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => { </Link> </div> <div className='w-8/12 p-2'> + {product.flashSale.id > 0 && ( + <div className='bg-red-600 rounded-full mb-1 p-2 pl-3 pr-3 flex w-fit items-center gap-x-1'> + <ImageNext + src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' + width={15} + height={10} + /> + <span className='text-white text-xs font-semibold'>{product?.flashSale?.tag != "false" || product?.flashSale?.tag != product?.flashSale?.tag ? product?.flashSale?.tag : 'FLASH SALE'}</span> + </div> + )} {product?.manufacture?.name ? ( <Link href={createSlug( |
