diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/product/components/Product/ProductMobile.jsx | 2 | ||||
| -rw-r--r-- | src/lib/product/components/ProductSlider.jsx | 46 | ||||
| -rw-r--r-- | src/pages/video.jsx | 2 |
3 files changed, 26 insertions, 24 deletions
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx index 0a7d690a..b75a191b 100644 --- a/src/lib/product/components/Product/ProductMobile.jsx +++ b/src/lib/product/components/Product/ProductMobile.jsx @@ -290,7 +290,7 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => { </div> </div> <div className='mt-8 mb-4'> - <div className='text-h-lg font-semibold mb-6'>Kamu Mungkin Juga Suka</div> + <div className='text-h-sm font-semibold mb-6'>Kamu Mungkin Juga Suka</div> <LazyLoad> <ProductSimilar query={productSimilarQuery} /> </LazyLoad> diff --git a/src/lib/product/components/ProductSlider.jsx b/src/lib/product/components/ProductSlider.jsx index c8bd3a82..931a8db7 100644 --- a/src/lib/product/components/ProductSlider.jsx +++ b/src/lib/product/components/ProductSlider.jsx @@ -12,7 +12,7 @@ const bannerClassName = const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => { const bannerRef = useRef('') - const { isMobile } = useDevice() + const { isMobile, isDesktop } = useDevice() const changeBannerOpacity = (swiper) => { if (!bannerMode) return @@ -32,27 +32,29 @@ const ProductSlider = ({ products, simpleTitle = false, bannerMode = false }) => /> </div> )} - <Swiper - freeMode={{ enabled: true, sticky: false }} - slidesPerView={isMobile ? 2.2 : 5.6} - spaceBetween={isMobile ? 8 : 16} - onSliderMove={changeBannerOpacity} - onSlideChangeTransitionEnd={changeBannerOpacity} - onSlideChangeTransitionStart={changeBannerOpacity} - prefix='product' - modules={[FreeMode]} - > - {bannerMode && ( - <SwiperSlide> - <Link href={products.banner.url} className='w-full h-full block'></Link> - </SwiperSlide> - )} - {products?.products?.map((product, index) => ( - <SwiperSlide key={index}> - <ProductCard product={product} simpleTitle={simpleTitle} /> - </SwiperSlide> - ))} - </Swiper> + {(isMobile || isDesktop) && ( + <Swiper + freeMode={{ enabled: true, sticky: false }} + slidesPerView={isMobile ? 2.2 : 5.6} + spaceBetween={isMobile ? 8 : 16} + onSliderMove={changeBannerOpacity} + onSlideChangeTransitionEnd={changeBannerOpacity} + onSlideChangeTransitionStart={changeBannerOpacity} + prefix='product' + modules={[FreeMode]} + > + {bannerMode && ( + <SwiperSlide> + <Link href={products.banner.url} className='w-full h-full block'></Link> + </SwiperSlide> + )} + {products?.products?.map((product, index) => ( + <SwiperSlide key={index}> + <ProductCard product={product} simpleTitle={simpleTitle} /> + </SwiperSlide> + ))} + </Swiper> + )} </> ) } diff --git a/src/pages/video.jsx b/src/pages/video.jsx index 708c3368..61790dbb 100644 --- a/src/pages/video.jsx +++ b/src/pages/video.jsx @@ -33,7 +33,7 @@ export default function Video() { <div className='shadow bg-white rounded' key={video.id}> <LazyLoadComponent> <iframe - src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)[1]}`} + src={`https://www.youtube.com/embed/${video.url.match(/v=([^&]*)/)?.[1] || ''}`} title='YouTube video player' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowFullScreen={true} |