src/lib/home/components/PreferredBrand.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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