diff options
| author | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-08-03 14:22:27 +0700 |
|---|---|---|
| committer | HATEC\SPVDEV001 <tri.susilo@altama.co.id> | 2023-08-03 14:22:27 +0700 |
| commit | 7f5b0518474f702b68ca459e5cb531212504472d (patch) | |
| tree | c8b98fd307e98365e90311a65edcd0bdaa9eaf87 /src/lib/product/components/Product | |
| parent | 942b4c3548891f25198140b80192e9190a403ee5 (diff) | |
flash sale
Diffstat (limited to 'src/lib/product/components/Product')
| -rw-r--r-- | src/lib/product/components/Product/ProductDesktop.jsx | 55 |
1 files changed, 36 insertions, 19 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index e13e2ab1..5cbe8a8a 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -19,6 +19,8 @@ import { Button, Spinner } from 'flowbite-react' import PromotionType from '@/lib/promotinProgram/components/PromotionType' import useAuth from '@/core/hooks/useAuth' import ImageNext from 'next/image' +import CountDown2 from '@/core/components/elements/CountDown/CountDown2' +import CountDown from '@/core/components/elements/CountDown/CountDown' const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { console.log('ini product', products) @@ -173,27 +175,42 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <div className='container mx-auto pt-10'> <div className='flex'> <div className='w-full flex flex-wrap'> - <div className='w-5/12 relative'> - <div className='absolute bottom-0 bg-red-600 w-full'> - <div className='flex gap-x-2 items-center p-2'> - <div className='bg-yellow-400 rounded-full p-1 h-10 w-14 flex items-center justify-center '> - <span className='text-lg font-bold'>40%</span> - </div> - <div className='bg-red-600 border border-solid border-yellow-400 rounded-full h-10 p-2 flex w-[50%] items-center justify-center gap-x-4'> - <ImageNext - src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' - width={20} - height={10} - /> - <span className='text-white text-lg font-semibold'>FLASH SALE</span> + <div className='w-5/12'> + <div className='relative mb-2'> + {product?.flashSale?.remainingTime > 0 && ( + <div className='absolute bottom-0 bg-red-600 w-full h-15 grid'> + <div className='flex gap-x-2 items-center p-2'> + <div className='bg-yellow-400 rounded-full p-1 h-9 w-20 flex items-center justify-center '> + <span className='text-lg font-bold'>{product.lowestPrice.discountPercentage}%</span> + </div> + <div className='bg-red-600 border border-solid border-yellow-400 rounded-full h-9 p-2 flex w-[50%] items-center justify-center gap-x-4'> + <ImageNext + src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' + width={17} + height={10} + /> + <span className='text-white text-lg font-semibold'>{product.flashSale.tag || 'FLASH SALE'}</span> + </div> + <div> + <CountDown2 initialTime={product.flashSale.remainingTime} /> + </div> + </div> </div> - </div> + )} + <Image + src={product.image} + alt={product.name} + className='h-[430px] object-contain object-center w-full border border-gray_r-4' + /> + </div> + <div> + <p className='text-justify text-xs leading-5'> + <span className='font-semibold '>Keterangan : </span>Gambar atau foto berperan + sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan + berbagai perubahan dan perbaikan. Hubungi tim sales kami untuk informasi yang + lebih baik perihal gambar di 021-2933 8828. + </p> </div> - <Image - src={product.image} - alt={product.name} - className='h-[430px] object-contain object-center w-full border border-gray_r-4' - /> </div> <div className='w-7/12 px-4'> |