From b7979c2c0c5443b4f7e1d970ab0422c19f49d4ad Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 2 Mar 2023 08:59:06 +0700
Subject: Add mobile view and desktop view component

---
 src/core/components/views/DesktopView.jsx | 14 +++++++++
 src/core/components/views/MobileView.jsx  | 14 +++++++++
 src/lib/home/components/HeroBanner.jsx    | 47 ++++++++++++++++---------------
 3 files changed, 53 insertions(+), 22 deletions(-)
 create mode 100644 src/core/components/views/DesktopView.jsx
 create mode 100644 src/core/components/views/MobileView.jsx

(limited to 'src')

diff --git a/src/core/components/views/DesktopView.jsx b/src/core/components/views/DesktopView.jsx
new file mode 100644
index 00000000..31a67936
--- /dev/null
+++ b/src/core/components/views/DesktopView.jsx
@@ -0,0 +1,14 @@
+import isMobile from 'is-mobile'
+import { useEffect, useState } from 'react'
+
+const DesktopView = ({ children }) => {
+  const [view, setView] = useState(<></>)
+
+  useEffect(() => {
+    if (!isMobile()) setView(children)
+  }, [children])
+
+  return view
+}
+
+export default DesktopView
diff --git a/src/core/components/views/MobileView.jsx b/src/core/components/views/MobileView.jsx
new file mode 100644
index 00000000..be8aa293
--- /dev/null
+++ b/src/core/components/views/MobileView.jsx
@@ -0,0 +1,14 @@
+import isMobile from 'is-mobile'
+import { useEffect, useState } from 'react'
+
+const MobileView = ({ children }) => {
+  const [view, setView] = useState(<></>)
+
+  useEffect(() => {
+    if (isMobile()) setView(children)
+  }, [children])
+
+  return view
+}
+
+export default MobileView
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>
   )
 }
 
-- 
cgit v1.2.3