summaryrefslogtreecommitdiff
path: root/src/lib/product
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib/product')
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx55
-rw-r--r--src/lib/product/components/ProductCard.jsx54
2 files changed, 75 insertions, 34 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'>
diff --git a/src/lib/product/components/ProductCard.jsx b/src/lib/product/components/ProductCard.jsx
index c85a76e9..b38bb43c 100644
--- a/src/lib/product/components/ProductCard.jsx
+++ b/src/lib/product/components/ProductCard.jsx
@@ -1,11 +1,14 @@
+import CountDown2 from '@/core/components/elements/CountDown/CountDown2'
import Image from '@/core/components/elements/Image/Image'
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 Product from './Product/Product'
const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
+ console.log('ini prodyct ', product)
const callForPriceWhatsapp = whatsappUrl('product', {
name: product.name,
url: createSlug('/shop/product/', product.name, product.id, true)
@@ -23,6 +26,23 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
alt={product?.name}
className='w-full object-contain object-center h-36 sm:h-48'
/>
+ {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'>{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>
+ )}
{product.variantTotal > 1 && (
<div className='absolute badge-gray bottom-1.5 left-1.5'>
{product.variantTotal} Varian
@@ -30,20 +50,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 ${
@@ -104,7 +124,11 @@ const ProductCard = ({ product, simpleTitle, variant = 'vertical' }) => {
<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} />
+ <ImageNext
+ src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg'
+ width={15}
+ height={10}
+ />
<span className='text-white text-xs font-semibold'>FLASH SALE</span>
</div>
)}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 05:34:44 +0000