src/lib/home/components/PopularProduct.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

import { Swiper, SwiperSlide } from "swiper/react"
import usePopularProduct from "../hooks/usePopularProduct"
import ProductCard from "@/lib/product/components/ProductCard"
import PopularProductSkeleton from "./Skeleton/PopularProductSkeleton"
import ProductSlider from "@/lib/product/components/ProductSlider"

const PopularProduct = () => {
  const { popularProducts } = usePopularProduct()
  
  return (
    <div className="px-4">
      <div className="font-medium mb-4">Produk Populer</div>
      { popularProducts.isLoading && <PopularProductSkeleton /> }
      { !popularProducts.isLoading && (
        <ProductSlider 
          products={popularProducts.data}
          simpleTitle
        />
      ) }
    </div>
  )
}

export default PopularProduct