diff options
Diffstat (limited to 'src-migrate/modules')
4 files changed, 72 insertions, 18 deletions
diff --git a/src-migrate/modules/popup-information/index.tsx b/src-migrate/modules/popup-information/index.tsx index d50711cc..cae50abf 100644 --- a/src-migrate/modules/popup-information/index.tsx +++ b/src-migrate/modules/popup-information/index.tsx @@ -15,7 +15,6 @@ const PagePopupInformation = () => { const [data, setData] = useState<any>(null); const [loading, setLoading] = useState(true); - useEffect(() => { const getData = async () => { const res = await fetch(`/api/hero-banner?type=popup-banner`); @@ -44,7 +43,10 @@ const PagePopupInformation = () => { className='w-[350px] md:w-[530px]' onClick={() => setActive(false)} > - <Link href={data[0].url === false ? '/' :data[0].url} aria-label='popup'> + <Link + href={data[0].url === false ? '/' : data[0].url} + aria-label='popup' + > <Image src={data[0]?.image} alt={data[0]?.name} diff --git a/src-migrate/modules/product-detail/components/ProductDetail.tsx b/src-migrate/modules/product-detail/components/ProductDetail.tsx index f23aa9dc..0660b9c0 100644 --- a/src-migrate/modules/product-detail/components/ProductDetail.tsx +++ b/src-migrate/modules/product-detail/components/ProductDetail.tsx @@ -2,7 +2,7 @@ import style from '../styles/product-detail.module.css'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { useEffect } from 'react'; +import { useEffect, useState } from 'react'; import { Button } from '@chakra-ui/react'; import { MessageCircleIcon, Share2Icon } from 'lucide-react'; @@ -73,6 +73,16 @@ 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 + } + console.log(product); + + const [mainImage, setMainImage] = useState(allImages[0] || ''); + return ( <> <div className='md:flex md:flex-wrap'> @@ -82,7 +92,37 @@ const ProductDetail = ({ product }: Props) => { <div className='md:w-9/12 md:flex md:flex-col md:pr-4 md:pt-6'> <div className='md:flex md:flex-wrap'> <div className='md:w-4/12'> - <ProductImage product={product} /> + <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'> + {allImages.map((img, 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' + : 'border-gray-200 hover:border-gray-300' + }`} + onClick={() => setMainImage(img)} + > + <img + src={img} + alt={`Thumbnail ${index + 1}`} + className='w-full h-full object-cover rounded-sm' + loading='lazy' + onError={(e) => { + (e.target as HTMLImageElement).src = + '/path/to/fallback-image.jpg'; + }} + /> + </div> + ))} + </div> + </div> + )} </div> <div className='md:w-8/12 px-4 md:pl-6'> @@ -106,7 +146,12 @@ const ProductDetail = ({ product }: Props) => { )} <div className='h-4 md:h-10' /> - {!!activeVariantId && !isApproval && <ProductPromoSection product={product} productId={activeVariantId} />} + {!!activeVariantId && !isApproval && ( + <ProductPromoSection + product={product} + productId={activeVariantId} + /> + )} {/* <div className={style['section-card']}> <h2 className={style['heading']}> @@ -121,15 +166,18 @@ const ProductDetail = ({ product }: Props) => { <div className={style['section-card']}> <h2 className={style['heading']}>Informasi Produk</h2> <div className='h-4' /> - <div - className={style['description']} - dangerouslySetInnerHTML={{ - __html: - !product.description || product.description == '<p><br></p>' - ? 'Belum ada deskripsi' - : product.description, - }} - /> + <div className='overflow-x-auto'> + <div + className={style['description']} + dangerouslySetInnerHTML={{ + __html: + !product.description || + product.description == '<p><br></p>' + ? 'Belum ada deskripsi' + : product.description, + }} + /> + </div> </div> </div> </div> diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 034d13e9..0c225c74 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -18,6 +18,7 @@ interface Voucher { name: string; description: string; code: string; + voucher_category: []; } const VoucherComponent = () => { diff --git a/src-migrate/modules/side-banner/index.tsx b/src-migrate/modules/side-banner/index.tsx index 878b8e70..7bc5f394 100644 --- a/src-migrate/modules/side-banner/index.tsx +++ b/src-migrate/modules/side-banner/index.tsx @@ -5,12 +5,15 @@ import Image from "~/components/ui/image";; import { getBanner } from "~/services/banner"; import { getRandomInt } from '@/utils/getRandomInt'; -const SideBanner = () => { +interface SideBannerProps { + query?: string; // Menentukan bahwa 'query' adalah string (bisa undefined) +} + +const SideBanner: React.FC<SideBannerProps> = ({ query }) => { const fetchSideBanner = useQuery({ - queryKey: 'sideBanner', - queryFn: () => getBanner({ type: 'side-banner-search' }) + queryKey: ["sideBanner", query], + queryFn: () => getBanner({ type: "side-banner-search", keyword: query }), }); - const length = useMemo(() => fetchSideBanner.data?.length, [fetchSideBanner.data]); const randomIndex = useMemo(() => getRandomInt(length), [length]); const banner = fetchSideBanner?.data?.[randomIndex] || false; |