1 files changed, 24 insertions, 0 deletions
diff --git a/src/lib/home/components/PopularProduct.jsx b/src/lib/home/components/PopularProduct.jsx
new file mode 100644
index 00000000..d23275f7
--- /dev/null
+++ b/src/lib/home/components/PopularProduct.jsx
@@ -0,0 +1,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