From 6b173eaf8a95432316822b1d41b084875adfbd83 Mon Sep 17 00:00:00 2001
From: "tri.susilo" <tri.susilo@altama.co.id>
Date: Wed, 8 May 2024 14:47:11 +0700
Subject: [agnes] - Feature category management

---
 src/lib/home/components/CategoryPilihan.jsx | 32 +++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/lib/home/components/CategoryPilihan.jsx

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
new file mode 100644
index 00000000..c506ef29
--- /dev/null
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -0,0 +1,32 @@
+import Image from 'next/image'
+import useCategoryHome from '../hooks/useCategoryHome'
+
+const CategoryPilihan = ({ id, categories }) => {
+  const { categoryHome } = useCategoryHome({ id })
+
+  return (
+    <section>
+        <div className='flex flex-row items-center gap-4'>
+            <h1>Kategori Pilihan</h1>
+            <p className='text-gray_r-10'>total produk</p>
+        </div>
+        <div className="group/item grid grid-cols-6 gap-2 w-full h-full col-span-2 border">
+                {categories.map((category) => (
+                    <div className="max-w-sm w-full gap-4 lg:max-w-full flex flex-col bg-white px-4 py-2 border-2 border-gray_r-8 rounded-lg">
+                        <div className="group/edit flex items-center justify-center group-hover/item:visible">
+                            <Image src='group-hover/ https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={80} height={80} alt={category?.name} />
+                            <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
+                                <span class="group-hover/edit:text-gray-700 ...">Call</span>
+                            </a>
+                        </div>
+                        <div className="flex flex-col justify-center leading-normal items-center">
+                            <h2 className="text-gray-900 font-bold text-sm items-center text-center">{category?.name}</h2>
+                        </div>
+                    </div>
+                ))}
+            </div>
+    </section>
+  )
+}
+
+export default CategoryPilihan
-- 
cgit v1.2.3


From 6c79d14a11c8dba20778c0559230a406cd147cc7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Wed, 3 Jul 2024 08:34:16 +0700
Subject: <iman> update category management

---
 src/lib/home/components/CategoryPilihan.jsx | 38 ++++++++++++++++++-----------
 1 file changed, 24 insertions(+), 14 deletions(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index c506ef29..3f1066e2 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -1,30 +1,40 @@
 import Image from 'next/image'
 import useCategoryHome from '../hooks/useCategoryHome'
+import Link from '@/core/components/elements/Link/Link'
+import { createSlug } from '@/core/utils/slug'
 
 const CategoryPilihan = ({ id, categories }) => {
   const { categoryHome } = useCategoryHome({ id })
-
+    console.log("id",id)
+    console.log("categories",categories)
   return (
     <section>
-        <div className='flex flex-row items-center gap-4'>
-            <h1>Kategori Pilihan</h1>
-            <p className='text-gray_r-10'>total produk</p>
+        <div className='flex flex-row items-center mb-4'>
+            <div className='font-semibold sm:text-h-lg mr-2'>Kategori Pilihan</div>
+            <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p>
         </div>
-        <div className="group/item grid grid-cols-6 gap-2 w-full h-full col-span-2 border">
+        <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
                 {categories.map((category) => (
-                    <div className="max-w-sm w-full gap-4 lg:max-w-full flex flex-col bg-white px-4 py-2 border-2 border-gray_r-8 rounded-lg">
-                        <div className="group/edit flex items-center justify-center group-hover/item:visible">
-                            <Image src='group-hover/ https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={80} height={80} alt={category?.name} />
-                            <a class="group/edit invisible hover:bg-slate-200 group-hover/item:visible ..." href="tel:{person.phone}">
-                                <span class="group-hover/edit:text-gray-700 ...">Call</span>
-                            </a>
+                    <div className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
+                        <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
+                            <div className="group/edit flex items-center justify-center h-48 w-60  flex-col group-hover/item:visible">
+                                <div className=' h-36'>
+                                    <Image className='group-hover:scale-110 transition-transform duration-300' src='https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={120} height={120} alt={category?.name} />
+                                </div>
+                                <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.name}</h2>
+                            </div>
                         </div>
-                        <div className="flex flex-col justify-center leading-normal items-center">
-                            <h2 className="text-gray-900 font-bold text-sm items-center text-center">{category?.name}</h2>
+                        <div className='KartuA relative inset-0  flex h-36 w-60   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
+                            <Link
+                                href={createSlug('/shop/category/', category?.name, category?.id)}
+                                className='category-mega-box__parent text-white   rounded-lg'
+                            >
+                                Lihat semua
+                            </Link>
                         </div>
                     </div>
                 ))}
-            </div>
+        </div>
     </section>
   )
 }
-- 
cgit v1.2.3


From 1a70984f3497652b8d8b64d16053c1f2be452bd7 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Fri, 5 Jul 2024 10:06:49 +0700
Subject: <iman> update category management

---
 src/lib/home/components/CategoryPilihan.jsx | 34 ++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 5 deletions(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 3f1066e2..4a1106b0 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -2,17 +2,41 @@ import Image from 'next/image'
 import useCategoryHome from '../hooks/useCategoryHome'
 import Link from '@/core/components/elements/Link/Link'
 import { createSlug } from '@/core/utils/slug'
+import { useEffect, useState } from 'react';
+import { bannerApi } from '../../../api/bannerApi';
+const { useQuery } = require('react-query')
+import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton';
+
 
 const CategoryPilihan = ({ id, categories }) => {
-  const { categoryHome } = useCategoryHome({ id })
-    console.log("id",id)
-    console.log("categories",categories)
-  return (
-    <section>
+    const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'index-a-1' }));
+      
+      return (
+          <section>
         <div className='flex flex-row items-center mb-4'>
             <div className='font-semibold sm:text-h-lg mr-2'>Kategori Pilihan</div>
             <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p>
         </div>
+        <div className='flex w-full h-48 bg-red-300 mb-4'>
+            {heroBanner.data &&
+                heroBanner.data?.length > 0 && (
+                    <div className='px-4 sm:px-0  object-fill '>
+                        {/* {heroBanner.data?.map((banner) => ( */}
+                            <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
+                                <Image
+                                width={439}
+                                height={150}
+                                quality={100}
+                                src={heroBanner.data[0].image}
+                                alt={heroBanner.data[0].name}
+                                className='h-48 object-fill w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+                                />
+                            </Link>
+                            {/* ))} */}
+                    </div>
+                
+                )}
+        </div>
         <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
                 {categories.map((category) => (
                     <div className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
-- 
cgit v1.2.3


From d6b459b3ea396775fae25b44d34c8dc724379224 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 20 Jul 2024 11:45:41 +0700
Subject: <iman> update mobile view

---
 src/lib/home/components/CategoryPilihan.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 4a1106b0..409a8918 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -43,7 +43,7 @@ const CategoryPilihan = ({ id, categories }) => {
                         <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
                             <div className="group/edit flex items-center justify-center h-48 w-60  flex-col group-hover/item:visible">
                                 <div className=' h-36'>
-                                    <Image className='group-hover:scale-110 transition-transform duration-300' src='https://erp.indoteknik.com/api/image/product.template/image_256/544371?ratio=square' width={120} height={120} alt={category?.name} />
+                                    <Image className='group-hover:scale-110 transition-transform duration-300' src={category?.image_1920? category?.image_1920 : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
                                 </div>
                                 <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.name}</h2>
                             </div>
-- 
cgit v1.2.3


From bf5c3b1d48da54e0e44689412ad9de9c10cf9edb Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 23 Jul 2024 09:28:21 +0700
Subject: <iman> update category management

---
 src/lib/home/components/CategoryPilihan.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 409a8918..7b9f0094 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -43,7 +43,7 @@ const CategoryPilihan = ({ id, categories }) => {
                         <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
                             <div className="group/edit flex items-center justify-center h-48 w-60  flex-col group-hover/item:visible">
                                 <div className=' h-36'>
-                                    <Image className='group-hover:scale-110 transition-transform duration-300' src={category?.image_1920? category?.image_1920 : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
+                                    <Image className='group-hover:scale-110 transition-transform duration-300' src={category?.image1920? category?.image1920 : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
                                 </div>
                                 <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.name}</h2>
                             </div>
-- 
cgit v1.2.3


From d42a1c2bb522a3b29c60bbe75d0d250fa3fca6d8 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 23 Jul 2024 17:01:10 +0700
Subject: <iman> update category management

---
 src/lib/home/components/CategoryPilihan.jsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 7b9f0094..54807686 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -9,7 +9,7 @@ import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton'
 
 
 const CategoryPilihan = ({ id, categories }) => {
-    const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'index-a-1' }));
+    const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
       
       return (
           <section>
@@ -29,7 +29,7 @@ const CategoryPilihan = ({ id, categories }) => {
                                 quality={100}
                                 src={heroBanner.data[0].image}
                                 alt={heroBanner.data[0].name}
-                                className='h-48 object-fill w-full rounded hover:scale-105 transition duration-500 ease-in-out'
+                                className='h-48 object-fill w-full'
                                 />
                             </Link>
                             {/* ))} */}
@@ -41,9 +41,9 @@ const CategoryPilihan = ({ id, categories }) => {
                 {categories.map((category) => (
                     <div className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
                         <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
-                            <div className="group/edit flex items-center justify-center h-48 w-60  flex-col group-hover/item:visible">
-                                <div className=' h-36'>
-                                    <Image className='group-hover:scale-110 transition-transform duration-300' src={category?.image1920? category?.image1920 : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
+                            <div className="group/edit flex items-center justify-end h-48 w-60  flex-col group-hover/item:visible">
+                                <div className=' h-36 flex justify-end items-end'>
+                                    <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image1920? category?.image1920 : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
                                 </div>
                                 <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.name}</h2>
                             </div>
-- 
cgit v1.2.3


From 2e71abba4ca5b83cc1fec229d4d85961c4b56d71 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Thu, 25 Jul 2024 08:27:05 +0700
Subject: <iman> update category management

---
 src/lib/home/components/CategoryPilihan.jsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 54807686..ea78b349 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -10,7 +10,6 @@ import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton'
 
 const CategoryPilihan = ({ id, categories }) => {
     const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
-      
       return (
           <section>
         <div className='flex flex-row items-center mb-4'>
@@ -38,7 +37,7 @@ const CategoryPilihan = ({ id, categories }) => {
                 )}
         </div>
         <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
-                {categories.map((category) => (
+                {categories?.map((category) => (
                     <div className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
                         <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
                             <div className="group/edit flex items-center justify-end h-48 w-60  flex-col group-hover/item:visible">
-- 
cgit v1.2.3


From e5a01976cb665b824b2ad6426a2c52a5bd0964e6 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 27 Jul 2024 08:27:54 +0700
Subject: <iman> add feature category lob

---
 src/lib/home/components/CategoryPilihan.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index ea78b349..9f184709 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -6,9 +6,11 @@ import { useEffect, useState } from 'react';
 import { bannerApi } from '../../../api/bannerApi';
 const { useQuery } = require('react-query')
 import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton';
-
+import useCategoryPilihan from '../hooks/useCategoryPilihan';
 
 const CategoryPilihan = ({ id, categories }) => {
+    const { categoryPilihan } = useCategoryPilihan();
+    console.log("categoryPilihan",categoryPilihan)
     const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
       return (
           <section>
@@ -37,19 +39,19 @@ const CategoryPilihan = ({ id, categories }) => {
                 )}
         </div>
         <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
-                {categories?.map((category) => (
+                {categoryPilihan?.data?.map((category) => (
                     <div className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
                         <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
                             <div className="group/edit flex items-center justify-end h-48 w-60  flex-col group-hover/item:visible">
                                 <div className=' h-36 flex justify-end items-end'>
-                                    <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image1920? category?.image1920 : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
+                                    <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
                                 </div>
-                                <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.name}</h2>
+                                <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
                             </div>
                         </div>
                         <div className='KartuA relative inset-0  flex h-36 w-60   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
                             <Link
-                                href={createSlug('/shop/category/', category?.name, category?.id)}
+                                href={createSlug('/shop/lob/', category?.industries, category?.id)}
                                 className='category-mega-box__parent text-white   rounded-lg'
                             >
                                 Lihat semua
-- 
cgit v1.2.3


From f1910544cf6df50bcb175b66b604f5903f6ae3fa Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Sat, 27 Jul 2024 13:34:00 +0700
Subject: <iman> update category management for lob

---
 src/lib/home/components/CategoryPilihan.jsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 9f184709..5548fc1b 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -10,7 +10,6 @@ import useCategoryPilihan from '../hooks/useCategoryPilihan';
 
 const CategoryPilihan = ({ id, categories }) => {
     const { categoryPilihan } = useCategoryPilihan();
-    console.log("categoryPilihan",categoryPilihan)
     const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
       return (
           <section>
-- 
cgit v1.2.3


From 7f060ad3f3d938a462292721b9c54d1cb9140ad3 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Mon, 29 Jul 2024 17:17:17 +0700
Subject: <iman> update category managemrnt

---
 src/lib/home/components/CategoryPilihan.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 5548fc1b..183c123a 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -39,7 +39,7 @@ const CategoryPilihan = ({ id, categories }) => {
         </div>
         <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
                 {categoryPilihan?.data?.map((category) => (
-                    <div className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
+                    <div key={category.id} className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
                         <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
                             <div className="group/edit flex items-center justify-end h-48 w-60  flex-col group-hover/item:visible">
                                 <div className=' h-36 flex justify-end items-end'>
-- 
cgit v1.2.3


From de27df05af1f23d70099d36d11e07f35faff26c6 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 30 Jul 2024 13:25:14 +0700
Subject: <iman> update mobile view

---
 src/lib/home/components/CategoryPilihan.jsx | 147 +++++++++++++++++++---------
 1 file changed, 103 insertions(+), 44 deletions(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 183c123a..e47524aa 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -7,59 +7,118 @@ import { bannerApi } from '../../../api/bannerApi';
 const { useQuery } = require('react-query')
 import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton';
 import useCategoryPilihan from '../hooks/useCategoryPilihan';
+import useDevice from '@/core/hooks/useDevice'
+import { Swiper, SwiperSlide } from 'swiper/react';
+import 'swiper/css';
 
 const CategoryPilihan = ({ id, categories }) => {
+    const { isDesktop, isMobile } = useDevice()
     const { categoryPilihan } = useCategoryPilihan();
     const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' }));
       return (
           <section>
-        <div className='flex flex-row items-center mb-4'>
-            <div className='font-semibold sm:text-h-lg mr-2'>Kategori Pilihan</div>
-            <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p>
-        </div>
-        <div className='flex w-full h-48 bg-red-300 mb-4'>
-            {heroBanner.data &&
-                heroBanner.data?.length > 0 && (
-                    <div className='px-4 sm:px-0  object-fill '>
-                        {/* {heroBanner.data?.map((banner) => ( */}
-                            <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
-                                <Image
-                                width={439}
-                                height={150}
-                                quality={100}
-                                src={heroBanner.data[0].image}
-                                alt={heroBanner.data[0].name}
-                                className='h-48 object-fill w-full'
-                                />
-                            </Link>
-                            {/* ))} */}
+            {isDesktop && (
+                <div>
+                    <div className='flex flex-row items-center mb-4'>
+                        <div className='font-semibold sm:text-h-lg mr-2'>LOB Kategori Pilihan</div>
+                        <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p>
                     </div>
-                
-                )}
-        </div>
-        <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
-                {categoryPilihan?.data?.map((category) => (
-                    <div key={category.id} className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
-                        <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
-                            <div className="group/edit flex items-center justify-end h-48 w-60  flex-col group-hover/item:visible">
-                                <div className=' h-36 flex justify-end items-end'>
-                                    <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
+                    <div className='flex w-full h-48 justify-center mb-4'>
+                        {heroBanner.data &&
+                            heroBanner.data?.length > 0 && (
+                                <div className=' '>
+                                        <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
+                                            <Image
+                                            width={1260}
+                                            height={170}
+                                            quality={100}
+                                            // src={heroBanner.data[0].image}
+                                            src={"https://erp.indoteknik.com/web/image?model=x_banner.banner&id=345&field=x_banner_image&unique=09202023101820"}
+                                            alt={heroBanner.data[0].name}
+                                            className='h-48 object-cover w-full'
+                                            />
+                                        </Link>
                                 </div>
-                                <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
-                            </div>
-                        </div>
-                        <div className='KartuA relative inset-0  flex h-36 w-60   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
-                            <Link
-                                href={createSlug('/shop/lob/', category?.industries, category?.id)}
-                                className='category-mega-box__parent text-white   rounded-lg'
-                            >
-                                Lihat semua
-                            </Link>
-                        </div>
+                            
+                            )}
                     </div>
-                ))}
-        </div>
-    </section>
+                    <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
+                            {categoryPilihan?.data?.map((category) => (
+                                <div key={category.id} className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
+                                    <div className='KartuB absolute h-48 w-60 inset-0 flex items-center justify-center '>
+                                        <div className="group/edit flex items-center justify-end h-48 w-60  flex-col group-hover/item:visible">
+                                            <div className=' h-36 flex justify-end items-end'>
+                                                <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
+                                            </div>
+                                            <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-60 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
+                                        </div>
+                                    </div>
+                                    <div className='KartuA relative inset-0  flex h-36 w-60   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
+                                        <Link
+                                            href={createSlug('/shop/lob/', category?.industries, category?.id)}
+                                            className='category-mega-box__parent text-white   rounded-lg'
+                                        >
+                                            Lihat semua
+                                        </Link>
+                                    </div>
+                                </div>
+                            ))}
+                    </div>
+                </div>
+            )}
+            {isMobile && (
+                <div className='p-4'>
+                    <div className='flex flex-row items-center mb-4'>
+                        <div className='font-semibold sm:text-h-md mr-2'>LOB Kategori Pilihan</div>
+                        {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */}
+                    </div>
+                    <div className='flex mb-4'>
+                        {heroBanner.data &&
+                            heroBanner.data?.length > 0 && (
+                                <div className=' object-fill '>
+                                        <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
+                                            <Image
+                                            width={439}
+                                            height={150}
+                                            quality={100}
+                                            src={heroBanner.data[0].image}
+                                            alt={heroBanner.data[0].name}
+                                            className='object-cover'
+                                            />
+                                        </Link>
+                                </div>
+                            
+                            )}
+                    </div>
+                        <Swiper slidesPerView={2.1} spaceBetween={10}>
+                            {categoryPilihan?.data?.map((category) => (
+                                <SwiperSlide key={category.id}>
+                                    <div key={category.id} className="KartuInti h-48 w-48 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
+                                        <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '>
+                                            <div className="group/edit flex items-center justify-end h-48 w-48  flex-col group-hover/item:visible">
+                                                <div className=' h-36 flex justify-end items-end'>
+                                                    <Image className='group-hover:scale-105 transition-transform duration-300 ' src={category?.image? category?.image : '/images/noimage.jpeg'}  width={120} height={120} alt={category?.name} />
+                                                </div>
+                                                <h2 className="text-gray-700 content-center h-12 border-t-[1px] px-1 w-48 border-gray-200 font-normal text-sm text-center">{category?.industries}</h2>
+                                            </div>
+                                        </div>
+                                        <div className='KartuA relative inset-0  flex h-36 w-48   items-center justify-center opacity-0 group-hover:opacity-75 group-hover:bg-[#E20613] transition-opacity '>
+                                            <Link
+                                                href={createSlug('/shop/lob/', category?.industries, category?.id)}
+                                                className='category-mega-box__parent text-white   rounded-lg'
+                                            >
+                                                Lihat semua
+                                            </Link>
+                                        </div>
+                                    </div>
+                                </SwiperSlide>
+                            ))}
+
+                        </Swiper>
+                    
+                </div>
+            )}
+            </section>
   )
 }
 
-- 
cgit v1.2.3


From a3875b3e803d7075fa8788286fb478bb0c825d26 Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 30 Jul 2024 14:06:55 +0700
Subject: <iman> update category management banner

---
 src/lib/home/components/CategoryPilihan.jsx | 17 ++++++-----------
 1 file changed, 6 insertions(+), 11 deletions(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index e47524aa..72e6f6a8 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -23,25 +23,21 @@ const CategoryPilihan = ({ id, categories }) => {
                         <div className='font-semibold sm:text-h-lg mr-2'>LOB Kategori Pilihan</div>
                         <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p>
                     </div>
-                    <div className='flex w-full h-48 justify-center mb-4'>
                         {heroBanner.data &&
                             heroBanner.data?.length > 0 && (
-                                <div className=' '>
-                                        <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
+                                <div className='flex w-full h-full justify-center mb-4 bg-cover bg-center'>
+                                        <Link  key={heroBanner.data[0].id} href={heroBanner.data[0].url}>
                                             <Image
                                             width={1260}
                                             height={170}
                                             quality={100}
-                                            // src={heroBanner.data[0].image}
-                                            src={"https://erp.indoteknik.com/web/image?model=x_banner.banner&id=345&field=x_banner_image&unique=09202023101820"}
+                                            src={heroBanner.data[0].image}
                                             alt={heroBanner.data[0].name}
-                                            className='h-48 object-cover w-full'
+                                            className='h-full object-cover w-full'
                                             />
                                         </Link>
-                                </div>
-                            
+                            </div>
                             )}
-                    </div>
                     <div className="group/item grid grid-cols-6 gap-y-2 w-full h-full col-span-2 ">
                             {categoryPilihan?.data?.map((category) => (
                                 <div key={category.id} className="KartuInti h-48 w-60 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
@@ -72,7 +68,7 @@ const CategoryPilihan = ({ id, categories }) => {
                         <div className='font-semibold sm:text-h-md mr-2'>LOB Kategori Pilihan</div>
                         {/* <p className='text-gray_r-10 text-sm'>200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!</p> */}
                     </div>
-                    <div className='flex mb-4'>
+                    <div className='flex'>
                         {heroBanner.data &&
                             heroBanner.data?.length > 0 && (
                                 <div className=' object-fill '>
@@ -87,7 +83,6 @@ const CategoryPilihan = ({ id, categories }) => {
                                             />
                                         </Link>
                                 </div>
-                            
                             )}
                     </div>
                         <Swiper slidesPerView={2.1} spaceBetween={10}>
-- 
cgit v1.2.3


From d14f51d91cfb8851ae2c335628737d2f516dbf6a Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 30 Jul 2024 14:25:53 +0700
Subject: <iman> update category management

---
 src/lib/home/components/CategoryPilihan.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/lib/home/components/CategoryPilihan.jsx')

diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx
index 72e6f6a8..6568621c 100644
--- a/src/lib/home/components/CategoryPilihan.jsx
+++ b/src/lib/home/components/CategoryPilihan.jsx
@@ -88,7 +88,7 @@ const CategoryPilihan = ({ id, categories }) => {
                         <Swiper slidesPerView={2.1} spaceBetween={10}>
                             {categoryPilihan?.data?.map((category) => (
                                 <SwiperSlide key={category.id}>
-                                    <div key={category.id} className="KartuInti h-48 w-48 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
+                                    <div key={category.id} className="KartuInti mt-2 h-48 w-48 max-w-sm   lg:max-w-full flex flex-col   border-[1px] border-gray-200  relative group">
                                         <div className='KartuB absolute h-48 w-48 inset-0 flex items-center justify-center '>
                                             <div className="group/edit flex items-center justify-end h-48 w-48  flex-col group-hover/item:visible">
                                                 <div className=' h-36 flex justify-end items-end'>
-- 
cgit v1.2.3