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..c338c4c4
--- /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-[150px]'>
+        {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'>
+              <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