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..3d3b1b69
--- /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={8}
+          freeMode 
+        >
+          { preferredBrands.data?.manufactures.map((brand) => (
+            <SwiperSlide key={brand.id}>
+              <BrandCard brand={brand} />
+            </SwiperSlide>
+          )) }
+        </Swiper>
+      ) }
+    </div>
+  )
+}
+
+export default PreferredBrand
+\ No newline at end of file