1 files changed, 50 insertions, 0 deletions
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
new file mode 100644
index 00000000..0ac14bad
--- /dev/null
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -0,0 +1,50 @@
+import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
+import useHeroBanner from '../hooks/useHeroBanner'
+import Image from '@/core/components/elements/Image/Image'
+
+// Swiper
+import { Swiper, SwiperSlide } from 'swiper/react'
+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]
+}
+
+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>
+  )
+}
+
+export default HeroBanner