diff options
| author | Miqdad <ahmadmiqdad27@gmail.com> | 2025-05-07 15:06:32 +0700 |
|---|---|---|
| committer | Miqdad <ahmadmiqdad27@gmail.com> | 2025-05-07 15:06:32 +0700 |
| commit | 89a0e7f37d7537c2d0d3715817453279443d518b (patch) | |
| tree | dd50e100d2d4d85bb630c8e765f7e4acf366a373 /src-migrate/modules | |
| parent | 11ea9426239b88181e5074a8e7246f8955346180 (diff) | |
Fix conflict
Diffstat (limited to 'src-migrate/modules')
| -rw-r--r-- | src-migrate/modules/product-detail/components/ProductDetail.tsx | 30 |
1 files changed, 12 insertions, 18 deletions
diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index bd2c895f..0660b9c0 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -23,8 +23,6 @@ import PriceAction from './PriceAction'; import SimilarBottom from './SimilarBottom'; import SimilarSide from './SimilarSide'; -import PagePopupInformation from '~/modules/popup-information'; - import { gtagProductDetail } from '@/core/utils/googleTag'; type Props = { @@ -75,12 +73,9 @@ const ProductDetail = ({ product }: Props) => { // setSelectedVariant(product?.variants[0]) }, []); - - // Gabungkan semua gambar produk (utama + tambahan) const allImages = product.image_carousel ? [...product.image_carousel] : []; - if (product.image) { allImages.unshift(product.image); // Tambahkan gambar utama di awal array } @@ -95,21 +90,20 @@ const ProductDetail = ({ product }: Props) => { <Breadcrumb id={product.id} name={product.name} /> </div> <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'> - <PagePopupInformation /> <div className='md:flex md:flex-wrap'> <div className='md:w-4/12'> - <ProductImage product={{ ...product, image: mainImage }} /> - + <ProductImage product={{ ...product, image: mainImage }} /> + {/* Carousel horizontal */} {allImages.length > 0 && ( - <div className="mt-4 overflow-x-auto"> - <div className="flex space-x-3 pb-3"> + <div className='mt-4 overflow-x-auto'> + <div className='flex space-x-3 pb-3'> {allImages.map((img, index) => ( - <div - key={index} + <div + key={index} className={`flex-shrink-0 w-16 h-16 cursor-pointer border-2 rounded-md transition-colors ${ - mainImage === img - ? 'border-red-500 ring-2 ring-red-200' + mainImage === img + ? 'border-red-500 ring-2 ring-red-200' : 'border-gray-200 hover:border-gray-300' }`} onClick={() => setMainImage(img)} @@ -117,10 +111,11 @@ const ProductDetail = ({ product }: Props) => { <img src={img} alt={`Thumbnail ${index + 1}`} - className="w-full h-full object-cover rounded-sm" - loading="lazy" + className='w-full h-full object-cover rounded-sm' + loading='lazy' onError={(e) => { - (e.target as HTMLImageElement).src = '/path/to/fallback-image.jpg'; + (e.target as HTMLImageElement).src = + '/path/to/fallback-image.jpg'; }} /> </div> @@ -128,7 +123,6 @@ const ProductDetail = ({ product }: Props) => { </div> </div> )} - </div> <div className='md:w-8/12 px-4 md:pl-6'> |
