<iman> update mobile view

2 files changed, 77 insertions, 0 deletions

diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx
new file mode 100644
index 00000000..a550bd62
--- /dev/null
+++ b/src/lib/home/components/CategoryDynamicMobile.jsx
@@ -0,0 +1,69 @@
+import React, { useEffect, useState } from 'react';
+import {fetchProductManagementSolr} from '../hooks/useCategoryManagement';
+import NextImage from 'next/image';
+import Link from "next/link"
+import router from 'next/router';
+import { createSlug } from '@/core/utils/slug'
+import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
+import 'swiper/css';
+
+const CategoryDynamicMobile =    () => {
+  const [promoItems, setPromoItems] = useState([]);
+  useEffect(() => {
+    const loadPromo = async () => {
+      
+      try {
+        const items = await fetchProductManagementSolr();
+        setPromoItems(items);
+
+      } catch (loadError) {
+        // console.error("Error loading promo items:", loadError)
+      }
+    }
+      loadPromo()
+
+  },[]);
+
+  console.log("promoItems",promoItems)
+
+  return (
+    <div className='p-4'>
+      {/* <div className='font-semibold sm:text-h-lg mb-2 px-4 sm:px-0'>Kategori Pilihan</div> */}
+      {/* Render category data */}
+      {promoItems && promoItems.map((category) => (
+        <div key={category.id}>
+          <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'>
+              <div className='font-semibold sm:text-h-sm mr-2'>{category.name}</div>
+                <Link href={createSlug('/shop/category/', category?.name, category?.category_id)} className="!text-red-500 font-semibold text-sm">Lihat Semua</Link>
+          </div>
+          <Swiper slidesPerView={2.3} spaceBetween={10}>
+          {category.category_id2.map((index)=> (
+            <SwiperSlide>
+              <div key={index.id} className='border justify-start items-start'>
+                <div className='p-3'>
+                    <div className='flex flex-row border mb-2 justify-start items-center'>
+                      <NextImage
+                        src={index.image? index.image : "https://erp.indoteknik.com/api/image/product.template/image_256/120726?ratio=square"}
+                        alt={index.name}
+                        width={90}
+                        height={30}
+                        className='object-fit'
+                      />
+                      <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'>
+                          <div className='font-semibold text-lg mr-2'>{index.name}</div>
+                          <p className='text-gray_r-10 text-sm'>999 rb+ Produk</p>
+                          <Link href={createSlug('/shop/category/', index?.name, index?.id_level_2)} className="!text-red-500 font-semibold">Lihat Semua</Link>
+                      </div>
+                    </div>
+                </div>
+              </div>
+            </SwiperSlide>
+            ))}
+          </Swiper>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default CategoryDynamicMobile;
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index b5d004ca..0255e239 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -56,6 +56,10 @@ const CategoryDynamic = dynamic(() =>
   import('@/lib/home/components/CategoryDynamic')
 );
 
+const CategoryDynamicMobile = dynamic(() =>
+  import('@/lib/home/components/CategoryDynamicMobile')
+);
+
 const CustomerReviews = dynamic(() =>
   import('@/lib/review/components/CustomerReviews')
 );
@@ -153,6 +157,10 @@ export default function Home({categoryId}) {
           <DelayRender renderAfter={600}>
             <PromotinProgram />
           </DelayRender>
+          <DelayRender renderAfter={600}>
+            {/* <CategoryPilihan categories={dataCategories}/> */}
+            <CategoryDynamicMobile/>
+          </DelayRender>
           <DelayRender renderAfter={800}>
             <PopularProduct />
           </DelayRender>