2 files changed, 42 insertions, 0 deletions

diff --git a/src/lib/product/components/CategorySection.jsx b/src/lib/product/components/CategorySection.jsx
new file mode 100644
index 00000000..7c347fe8
--- /dev/null
+++ b/src/lib/product/components/CategorySection.jsx
@@ -0,0 +1,22 @@
+import Image from "next/image"
+
+const CategorySection = ({ categories }) => {
+    return (
+        <section className="items-center bg-danger-100">
+            <div className="grid grid-cols-4 gap-2 w-full h-full col-span-2">
+                {categories.map((category) => (
+                    <div class="max-w-sm w-fit gap-4 lg:max-w-full lg:flex bg-white px-4 py-2 border-2 border-gray_r-8 rounded-lg">
+                        <div className="flex items-center justify-center">
+                            <Image src='https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={80} height={80} alt={category?.name} />
+                        </div>
+                        <div class="flex flex-col justify-center leading-normal">
+                            <h2 class="text-gray-900 font-bold text-sm">{category?.name}</h2>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </section>
+    )
+}
+
+export default CategorySection
\ No newline at end of file
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 08b64c13..253c3703 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -26,6 +26,8 @@ import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton';
 
 import SideBanner from '~/modules/side-banner';
 import FooterBanner from '~/modules/footer-banner';
+import CategorySection from './CategorySection';
+import { getIdFromSlug } from '@/core/utils/slug'
 
 const ProductSearch = ({
   query,
@@ -68,6 +70,10 @@ const ProductSearch = ({
   const productStart = productSearch.data?.responseHeader.params.start;
   const productRows = limit;
   const productFound = productSearch.data?.response.numFound;
+  const [dataCategories, setDataCategories] = useState([])
+
+  const categoryId = getIdFromSlug(prefixUrl)
+
 
   useEffect(() => {
     if (productFound == 0 && query.q && !spellings) {
@@ -116,6 +122,18 @@ const ProductSearch = ({
     }
   }, [q]);
 
+  useEffect(() => {
+    const loadCategories = async () => {
+     const getCategories = await odooApi('GET', '/api/v1/category/child?partner_id='+{categoryId})
+     if(getCategories){
+      setDataCategories(getCategories)
+     }
+    }
+    loadCategories()
+  }, [])
+  
+  console.log('Data Category : ', dataCategories)
+
   const brands = [];
   for (
     let i = 0;
@@ -409,7 +427,9 @@ const ProductSearch = ({
 
             <SideBanner />
           </div>
+
           <div className='w-9/12 pl-6'>
+            <CategorySection categories={dataCategories}/>
             {bannerPromotionHeader && bannerPromotionHeader?.image && (
               <div className='mb-3'>
                 <Image