1 files changed, 30 insertions, 0 deletions
diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx
new file mode 100644
index 00000000..3df3cdb7
--- /dev/null
+++ b/src/lib/home/components/PreferredBrand.jsx
@@ -0,0 +1,30 @@
+import { Swiper, SwiperSlide } from 'swiper/react'
+import usePreferredBrand from '../hooks/usePreferredBrand'
+import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton'
+import BrandCard from '@/lib/brand/components/BrandCard'
+
+const PreferredBrand = () => {
+  const { preferredBrands } = usePreferredBrand()
+
+  return (
+    <div className='px-4'>
+      <div className='font-medium mb-4'>Brand Pilihan</div>
+      {preferredBrands.isLoading && <PreferredBrandSkeleton />}
+      {!preferredBrands.isLoading && (
+        <Swiper
+          slidesPerView={3.5}
+          spaceBetween={12}
+          freeMode
+        >
+          {preferredBrands.data?.manufactures.map((brand) => (
+            <SwiperSlide key={brand.id}>
+              <BrandCard brand={brand} />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
+    </div>
+  )
+}
+
+export default PreferredBrand