1 files changed, 70 insertions, 0 deletions
diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
new file mode 100644
index 00000000..a42f4c81
--- /dev/null
+++ b/src/lib/brand/components/Brand.jsx
@@ -0,0 +1,70 @@
+import useBrand from "../hooks/useBrand"
+import Image from "@/core/components/elements/Image/Image"
+
+import { Swiper, SwiperSlide } from "swiper/react"
+import { Pagination, Autoplay } from "swiper"
+import "swiper/css"
+import "swiper/css/pagination"
+import "swiper/css/autoplay"
+import Divider from "@/core/components/elements/Divider/Divider"
+import ImageSkeleton from "@/core/components/elements/Skeleton/ImageSkeleton"
+
+const swiperBanner = {
+  pagination: { dynamicBullets: true },
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  modules: [Pagination, Autoplay]
+}
+
+const Brand = ({ id }) => {
+  const { brand } = useBrand({ id })
+  
+  return (
+    <>
+      <div className="min-h-[200px]">
+        { brand.isLoading && <ImageSkeleton /> }
+        { brand.data && (
+          <>
+            <Swiper
+              slidesPerView={1}
+              pagination={swiperBanner.pagination} 
+              modules={swiperBanner.modules}
+              autoplay={swiperBanner.autoplay}
+              className="border-b border-gray_r-6"
+            >
+              { brand.data?.banners?.map((banner, index) => (
+                <SwiperSlide key={index}>
+                  <Image 
+                    src={banner}
+                    alt={`Brand ${brand.data?.name} - Indoteknik`}
+                    className="w-full h-auto"
+                  />
+                </SwiperSlide>
+              )) }
+            </Swiper>
+            <div className="p-4 pt-2">
+              <div className="text-caption-1 text-gray_r-11 mb-2">Produk dari brand:</div>
+              { brand?.data?.logo && (
+                <Image 
+                  src={brand?.data?.logo} 
+                  alt={brand?.data?.name} 
+                  className="w-32 p-2 border borde-gray_r-6 rounded"
+                />
+              ) }
+              { !brand?.data?.logo && (
+                <div className="bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit">
+                  { brand?.data?.name }
+                </div>
+              ) }
+            </div>
+          </>
+        ) }
+      </div>
+      <Divider />
+    </>
+  )
+}
+
+export default Brand
+\ No newline at end of file