Product slider categories home page

3 files changed, 32 insertions, 7 deletions

diff --git a/src/components/layouts/Header.js b/src/components/layouts/Header.js
index bc740810..5df75c3c 100644
--- a/src/components/layouts/Header.js
+++ b/src/components/layouts/Header.js
@@ -31,7 +31,7 @@ const menus = [
 export default function Header({ title }) {
   const router = useRouter();
   const { q = '' } = router.query;
-  const [searchQuery, setSearchQuery] = useState(q);
+  const [searchQuery, setSearchQuery] = useState(q != '*' ? q : '');
   const [suggestions, setSuggestions] = useState([]);
   const searchQueryRef = useRef();
   const [isMenuActive, setIsMenuActive] = useState(false);
diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js
index ddc505c7..cf663995 100644
--- a/src/components/products/ProductSlider.js
+++ b/src/components/products/ProductSlider.js
@@ -2,11 +2,24 @@ import { Swiper, SwiperSlide } from "swiper/react";
 import ProductCard from "./ProductCard";
 import ImagePlaceholderIcon from "../../icons/image-placeholder.svg";
 import "swiper/css";
+import Image from "../elements/Image";
+import Link from "../elements/Link";
 
-export default function ProductSlider({ products }) {
+export default function ProductSlider({ 
+  products, 
+  bannerMode = false 
+}) {
   return (
     <>
+      { bannerMode && (
+        <Image src={products.image} alt={products.name} className="absolute top-0 left-0 h-full max-w-[55%]" />
+      ) }
       <Swiper freeMode={true} slidesPerView={2.2} spaceBetween={8}>
+        { bannerMode && (
+          <SwiperSlide>
+            <Link href={`/shop/search?category=${products.name}`} className="w-full h-full block"></Link>
+          </SwiperSlide>
+        ) }
         {products?.products?.map((product, index) => (
           <SwiperSlide key={index}>
             <ProductCard data={product} />
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>