Refactoring hero banner feature

1 files changed, 64 insertions, 0 deletions

diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
new file mode 100644
index 00000000..1b5bf165
--- /dev/null
+++ b/src/components/ui/HeroBanner.jsx
@@ -0,0 +1,64 @@
+import DesktopView from '@/core/components/views/DesktopView'
+import MobileView from '@/core/components/views/MobileView'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import { Pagination, Autoplay } from 'swiper'
+import 'swiper/css'
+import 'swiper/css/pagination'
+import 'swiper/css/autoplay'
+import { useMemo } from 'react'
+import Link from '@/core/components/elements/Link/Link'
+import Image from '@/core/components/elements/Image/Image'
+import { useQuery } from 'react-query'
+import { BannerApi } from '@/api/BannerApi'
+import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
+
+const swiperBanner = {
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  modules: [Pagination, Autoplay],
+  loop: true,
+  className: 'border border-gray_r-6',
+  slidesPerView: 1
+}
+
+const HeroBanner = () => {
+  const heroBanner = useQuery('heroBanner', BannerApi({ type: 'index-a-1' }))
+
+  const swiperBannerMobile = {
+    ...swiperBanner,
+    pagination: { dynamicBullets: true, clickable: true }
+  }
+
+  const swiperBannerDesktop = {
+    ...swiperBanner,
+    pagination: { dynamicBullets: false, clickable: true }
+  }
+
+  const BannerComponent = useMemo(() => {
+    return heroBanner.data?.map((banner, index) => (
+      <SwiperSlide key={index}>
+        <Link href={banner.url} className='w-full h-auto'>
+          <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+        </Link>
+      </SwiperSlide>
+    ))
+  }, [heroBanner.data])
+
+  if (heroBanner.isLoading) return <HeroBannerSkeleton />
+
+  return (
+    <>
+      <MobileView>
+        <Swiper {...swiperBannerMobile}>{BannerComponent}</Swiper>
+      </MobileView>
+
+      <DesktopView>
+        <Swiper {...swiperBannerDesktop}>{BannerComponent}</Swiper>
+      </DesktopView>
+    </>
+  )
+}
+
+export default HeroBanner