Add mobile view and desktop view component

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>
   )
 }