blog detail

1 files changed, 33 insertions, 21 deletions

diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
index 95f590fc..e6136e03 100644
--- a/src/lib/home/components/HeroBanner.jsx
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -8,14 +8,23 @@ import { Pagination, Autoplay } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/autoplay'
-import useDevice from '@/core/hooks/useDevice'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
 
 const HeroBanner = () => {
-  const { isMobile } = useDevice()
   const { heroBanners } = useHeroBanner()
 
-  const swiperBanner = {
-    pagination: { dynamicBullets: isMobile ? true : false, clickable: true },
+  const swiperBannerMobile = {
+    pagination: { dynamicBullets: true, clickable: true },
+    autoplay: {
+      delay: 6000,
+      disableOnInteraction: false
+    },
+    modules: [Pagination, Autoplay]
+  }
+
+  const swiperBannerDesktop = {
+    pagination: { dynamicBullets: false, clickable: true },
     autoplay: {
       delay: 6000,
       disableOnInteraction: false
@@ -27,23 +36,26 @@ const HeroBanner = () => {
     <div className='min-h-[200px]'>
       {heroBanners.isLoading && <ImageSkeleton />}
       {!heroBanners.isLoading && (
-        <Swiper
-          slidesPerView={1}
-          pagination={swiperBanner.pagination}
-          modules={swiperBanner.modules}
-          autoplay={swiperBanner.autoplay}
-          className='border 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>
+        <>
+          <MobileView>
+            <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerMobile}>
+              {heroBanners.data?.map((banner, index) => (
+                <SwiperSlide key={index}>
+                  <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </MobileView>
+          <DesktopView>
+            <Swiper slidesPerView={1} className='border border-gray_r-6' {...swiperBannerDesktop}>
+              {heroBanners.data?.map((banner, index) => (
+                <SwiperSlide key={index}>
+                  <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+                </SwiperSlide>
+              ))}
+            </Swiper>
+          </DesktopView>
+        </>
       )}
     </div>
   )