diff options
| -rw-r--r-- | src-migrate/modules/product-detail/components/Image.tsx | 116 | ||||
| -rw-r--r-- | src-migrate/types/product.ts | 1 | ||||
| -rw-r--r-- | src/utils/solrMapping.js | 1 |
3 files changed, 60 insertions, 58 deletions
diff --git a/src-migrate/modules/product-detail/components/Image.tsx b/src-migrate/modules/product-detail/components/Image.tsx index 30ca0d34..29710df8 100644 --- a/src-migrate/modules/product-detail/components/Image.tsx +++ b/src-migrate/modules/product-detail/components/Image.tsx @@ -1,22 +1,22 @@ import style from '../styles/image.module.css'; import ImageNext from 'next/image'; -import React, { useEffect, useMemo, useState } from 'react' -import { InfoIcon } from 'lucide-react' -import { Tooltip } from '@chakra-ui/react' +import React, { useEffect, useMemo, useState } from 'react'; +import { InfoIcon } from 'lucide-react'; +import { Tooltip } from '@chakra-ui/react'; -import { IProductDetail } from '~/types/product' -import ImageUI from '~/components/ui/image' +import { IProductDetail } from '~/types/product'; +import ImageUI from '~/components/ui/image'; import moment from 'moment'; - +import useDevice from '@/core/hooks/useDevice'; type Props = { - product: IProductDetail -} + product: IProductDetail; +}; const Image = ({ product }: Props) => { - const flashSale = product.flash_sale + const flashSale = product.flash_sale; const [count, setCount] = useState(flashSale?.remaining_time || 0); - + const { isDesktop, isMobile } = useDevice(); useEffect(() => { let interval: NodeJS.Timeout; @@ -34,59 +34,58 @@ const Image = ({ product }: Props) => { }; }, [flashSale?.remaining_time]); - const duration = moment.duration(count, 'seconds') - + const duration = moment.duration(count, 'seconds'); + console.log('product', product); const image = useMemo(() => { - if (product.image) return product.image + '?ratio=square' - return '/images/noimage.jpeg' - }, [product.image]) + if (isMobile && product.image_mobile) { + return product.image_mobile + '?ratio=square'; + } + }, [product.image, product.image_mobile]); return ( <div className={style['wrapper']}> {/* <div className="relative"> */} - <ImageUI - src={image} - alt={product.name} - width={256} - height={256} - className={style['image']} - loading='eager' - priority - /> - <div className="absolute top-4 right-10 flex "> - <div className="gambarB "> - {product.isSni && ( - <ImageNext - src="/images/sni-logo.png" - alt="SNI Logo" - className="w-12 h-8 object-contain object-top sm:h-6" - width={50} - height={50} - /> - )} - </div> - <div className="gambarC "> - {product.isTkdn && ( - <ImageNext - src="/images/TKDN.png" - alt="TKDN" - className="w-16 h-8 object-contain object-top ml-1 mr-1 sm:h-6" - width={50} - height={50} - /> - )} - </div> - </div> - {/* </div> */} - - + <ImageUI + src={image} + alt={product.name} + width={256} + height={256} + className={style['image']} + loading='eager' + priority + /> + <div className='absolute top-4 right-10 flex '> + <div className='gambarB '> + {product.isSni && ( + <ImageNext + src='/images/sni-logo.png' + alt='SNI Logo' + className='w-12 h-8 object-contain object-top sm:h-6' + width={50} + height={50} + /> + )} + </div> + <div className='gambarC '> + {product.isTkdn && ( + <ImageNext + src='/images/TKDN.png' + alt='TKDN' + className='w-16 h-8 object-contain object-top ml-1 mr-1 sm:h-6' + width={50} + height={50} + /> + )} + </div> + </div> + {/* </div> */} <div className={style['absolute-info']}> <Tooltip placement='bottom-end' label='Gambar atau foto berperan sebagai ilustrasi produk. Kadang tidak sesuai dengan kondisi terbaru dengan berbagai perubahan dan perbaikan. Hubungi admin kami untuk informasi yang lebih baik perihal gambar.' > - <div className="text-gray-600"> + <div className='text-gray-600'> <InfoIcon size={20} /> </div> </Tooltip> @@ -94,7 +93,7 @@ const Image = ({ product }: Props) => { {flashSale.remaining_time > 0 && ( <div className='absolute bottom-0 w-full h-14'> - <div className="relative w-full h-full"> + <div className='relative w-full h-full'> <ImageUI src='/images/BG-FLASH-SALE.jpg' alt='Flash Sale Indoteknik' @@ -105,7 +104,9 @@ const Image = ({ product }: Props) => { <div className={style['flashsale']}> <div className='flex items-center gap-x-3'> - <div className={style['disc-badge']}>{Math.floor(product.lowest_price.discount_percentage)}%</div> + <div className={style['disc-badge']}> + {Math.floor(product.lowest_price.discount_percentage)}% + </div> <div className={style['flashsale-text']}> <ImageUI src='/images/ICON_FLASH_SALE_WEBSITE_INDOTEKNIK.svg' @@ -122,12 +123,11 @@ const Image = ({ product }: Props) => { <span>{duration.seconds().toString().padStart(2, '0')}</span> </div> </div> - </div> </div> )} </div> - ) -} + ); +}; -export default Image
\ No newline at end of file +export default Image; diff --git a/src-migrate/types/product.ts b/src-migrate/types/product.ts index 31ea0ce1..e43a5ebb 100644 --- a/src-migrate/types/product.ts +++ b/src-migrate/types/product.ts @@ -3,6 +3,7 @@ import { IProductVariantDetail } from './productVariant'; export interface IProduct { id: number; image: string; + image_mobile: string; code: string; display_name: string; name: string; diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js index f73e966a..d4b3f08c 100644 --- a/src/utils/solrMapping.js +++ b/src/utils/solrMapping.js @@ -43,6 +43,7 @@ export const productMappingSolr = (products, pricelist) => { let productMapped = { id: product.product_id_i || '', image: product.image_s || '', + imageMobile: product.image_mobile_s || '', code: product.default_code_s || '', description: product.description_t || '', displayName: product.display_name_s || '', |