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..604ca8ac
--- /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
+\ No newline at end of file