Product slider categories home page

1 files changed, 17 insertions, 5 deletions

diff --git a/src/pages/index.js b/src/pages/index.js
index 35175dce..8c636616 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -27,6 +27,7 @@ export default function Home({ heroBanners }) {
   const [manufactures, setManufactures] = useState(null);
   const [readyStockProducts, setReadyStockProducts] = useState(null);
   const [popularProducts, setPopularProducts] = useState(null);
+  const [categoryProducts, setCategoryProducts] = useState(null);
 
   useEffect(() => {
     const getManufactures = async () => {
@@ -46,6 +47,12 @@ export default function Home({ heroBanners }) {
       setPopularProducts(dataPopularProducts.data.response);
     }
     getPopularProducts();
+
+    const getCategoryProducts = async () => {
+      const dataCategoryProducts = await apiOdoo('GET', '/api/v1/categories_homepage');
+      setCategoryProducts(dataCategoryProducts);
+    }
+    getCategoryProducts();
   }, []);
 
   return (
@@ -77,14 +84,19 @@ export default function Home({ heroBanners }) {
             }
           </Swiper>
         </div>
-        <div className="mt-6 px-4 mb-6">
+        <div className="my-6 px-4">
           <h2 className="mb-3">Produk Populer</h2>
           <ProductSlider products={popularProducts} />
         </div>
-        <div className="mt-6 px-4 mb-6">
-          <h2 className="mb-3">Produk Ready Stock</h2>
-          <ProductSlider products={readyStockProducts} />
-        </div>
+
+        { categoryProducts?.map((categoryProduct) => (
+          <div className="my-6 px-4 py-3 relative" key={categoryProduct.id}>
+            <ProductSlider 
+              products={categoryProduct} 
+              bannerMode={true}
+            />
+          </div>
+        )) }
 
         <div className="px-4">
           <h5 className="h2 mb-2">Platform Belanja B2B Alat Teknik & Industri di Indonesia</h5>