diff options
Diffstat (limited to 'src/lib/home/components/HeroBanner.jsx')
| -rw-r--r-- | src/lib/home/components/HeroBanner.jsx | 47 |
1 files changed, 25 insertions, 22 deletions
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx index 0ac14bad..e6690c01 100644 --- a/src/lib/home/components/HeroBanner.jsx +++ b/src/lib/home/components/HeroBanner.jsx @@ -1,6 +1,7 @@ import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton' import useHeroBanner from '../hooks/useHeroBanner' import Image from '@/core/components/elements/Image/Image' +import MobileView from '@/core/components/views/MobileView' // Swiper import { Swiper, SwiperSlide } from 'swiper/react' @@ -22,28 +23,30 @@ const HeroBanner = () => { const { heroBanners } = useHeroBanner() return ( - <div className='min-h-[200px]'> - {heroBanners.isLoading && <ImageSkeleton />} - {!heroBanners.isLoading && ( - <Swiper - slidesPerView={1} - pagination={swiperBanner.pagination} - modules={swiperBanner.modules} - autoplay={swiperBanner.autoplay} - className='border-b border-gray_r-6' - > - {heroBanners.data?.map((banner, index) => ( - <SwiperSlide key={index}> - <Image - src={banner.image} - alt={banner.name} - className='w-full h-auto' - /> - </SwiperSlide> - ))} - </Swiper> - )} - </div> + <MobileView> + <div className='min-h-[200px]'> + {heroBanners.isLoading && <ImageSkeleton />} + {!heroBanners.isLoading && ( + <Swiper + slidesPerView={1} + pagination={swiperBanner.pagination} + modules={swiperBanner.modules} + autoplay={swiperBanner.autoplay} + className='border-b border-gray_r-6' + > + {heroBanners.data?.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + src={banner.image} + alt={banner.name} + className='w-full h-auto' + /> + </SwiperSlide> + ))} + </Swiper> + )} + </div> + </MobileView> ) } |