create useDevice hooks, optimize DesktopView and MobileView, and show category API data

1 files changed, 33 insertions, 34 deletions

diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
index e6690c01..95f590fc 100644
--- a/src/lib/home/components/HeroBanner.jsx
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -1,7 +1,6 @@
 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'
@@ -9,44 +8,44 @@ import { Pagination, Autoplay } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/autoplay'
-
-const swiperBanner = {
-  pagination: { dynamicBullets: true },
-  autoplay: {
-    delay: 6000,
-    disableOnInteraction: false
-  },
-  modules: [Pagination, Autoplay]
-}
+import useDevice from '@/core/hooks/useDevice'
 
 const HeroBanner = () => {
+  const { isMobile } = useDevice()
   const { heroBanners } = useHeroBanner()
 
+  const swiperBanner = {
+    pagination: { dynamicBullets: isMobile ? true : false, clickable: true },
+    autoplay: {
+      delay: 6000,
+      disableOnInteraction: false
+    },
+    modules: [Pagination, Autoplay]
+  }
+
   return (
-    <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>
+    <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>
+      )}
+    </div>
   )
 }