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