diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/product/components/Product/ProductDesktop.jsx | 13 | ||||
| -rw-r--r-- | src/lib/product/components/Product/ProductMobile.jsx | 26 | ||||
| -rw-r--r-- | src/styles/globals.css | 20 |
3 files changed, 50 insertions, 9 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx index 3b9296a8..618c35f5 100644 --- a/src/lib/product/components/Product/ProductDesktop.jsx +++ b/src/lib/product/components/Product/ProductDesktop.jsx @@ -197,7 +197,11 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { {product?.flashSale?.remainingTime > 0 && ( <div className={`absolute bottom-0 w-full`}> <div className='absolute bottom-0 w-full h-full'> - <ImageNext src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} width={1000} height={100} /> + <ImageNext + src={backgorundFlashSale || '/images/GAMBAR-BG-FLASH-SALE.jpg'} + width={1000} + height={100} + /> </div> <div className='relative'> <div className='flex gap-x-2 items-center p-2'> @@ -553,7 +557,12 @@ const ProductDesktop = ({ products, wishlist, toggleWishlist }) => { <tbody> {product.variants.map((variant, index) => ( <tr key={variant.id}> - <td>{variant.code}</td> + <td className='flex items-center justify-center gap-x-1'> + {variant.isFlashsale && ( + <span className='blink-color-flash-sale'>🗲</span> + )} + {variant.code} + </td> <td>{variant.attributes.join(', ') || '-'}</td> <td> {isLoadingSLA ? ( diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index d25d0861..56f20aac 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -62,12 +62,25 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { hasProgram: false }) - const variantOptions = product.variants?.map((variant) => ({ - value: variant.id, - label: - (variant.code ? `[${variant.code}] ` : '') + - (variant.attributes.length > 0 ? variant.attributes.join(', ') : product.name) - })) + const variantOptions = product.variants?.map((variant) => { + let label = [] + if (variant.isFlashsale) { + label.push("<span class='blink-color-flash-sale'>🗲</span>") + } + if (variant.code) { + label.push(`[${variant.code}]`) + } + if (variant.attributes.length > 0) { + label.push(variant.attributes.join(', ')) + } else { + label.push(product.name) + } + + return { + value: variant.id, + label: label.join(' ') + } + }) useEffect(() => { const fetchData = async () => { @@ -279,6 +292,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { name='variant' classNamePrefix='form-select' options={variantOptions} + formatOptionLabel={({ label }) => <div dangerouslySetInnerHTML={{ __html: label }} />} className='mt-2' value={selectedVariant} onChange={(option) => setSelectedVariant(option)} diff --git a/src/styles/globals.css b/src/styles/globals.css index af9f9bea..06ae7ca2 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -638,4 +638,22 @@ button { 30%, 50%, 70% { transform: translateX(-10px); } 40%, 60% { transform: translateX(10px); } 100% { transform: translateX(0); } - } +} + +.blink-color-flash-sale { + @apply text-body-1 md:text-title-sm; + transform: rotateY(180deg) rotateZ(120deg); + animation-name: blink-color-flash-sale; + animation-duration: 300ms; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +@keyframes blink-color-flash-sale { + from { + @apply text-danger-500; + } + to { + @apply text-warning-500; + } +}
\ No newline at end of file |