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

---
 .../components/elements/Navbar/NavbarMobile.jsx    |   4 +-
 src/core/components/elements/Navbar/TopBanner.jsx  |  29 ++--
 src/lib/home/components/CategoryPilihan.jsx        | 147 +++++++++++++++------
 3 files changed, 119 insertions(+), 61 deletions(-)

diff --git a/src/core/components/elements/Navbar/NavbarMobile.jsx b/src/core/components/elements/Navbar/NavbarMobile.jsx
index bcf45e0a..90314671 100644
--- a/src/core/components/elements/Navbar/NavbarMobile.jsx
+++ b/src/core/components/elements/Navbar/NavbarMobile.jsx
@@ -11,7 +11,7 @@ import Image from 'next/image';
 import { useEffect, useState } from 'react';
 import MobileView from '../../views/MobileView';
 import Link from '../Link/Link';
-// import TopBanner from './TopBanner';
+import TopBanner from './TopBanner';
 
 const Search = dynamic(() => import('./Search'));
 
@@ -39,7 +39,7 @@ const NavbarMobile = () => {
 
   return (
     <MobileView>
-      {/* <TopBanner /> */}
+      <TopBanner />
       <nav className='px-4 py-2 pb-3 sticky top-0 z-50 bg-white shadow'>
         <div className='flex justify-between items-center mb-2'>
           <Link href='/'>
diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx
index 83ef8c7a..df47e87d 100644
--- a/src/core/components/elements/Navbar/TopBanner.jsx
+++ b/src/core/components/elements/Navbar/TopBanner.jsx
@@ -1,12 +1,12 @@
 import Image from 'next/image';
-import { useQuery } from 'react-query';
-
+import { useQuery } from 'react-query';import useDevice from '@/core/hooks/useDevice'
 import odooApi from '@/core/api/odooApi';
 import SmoothRender from '~/components/ui/smooth-render';
 import Link from '../Link/Link';
 import { background } from '@chakra-ui/react';
 
 const TopBanner = () => {
+  const { isDesktop, isMobile } = useDevice()
   const topBanner = useQuery({
     queryKey: 'topBanner',
     queryFn: async () => await odooApi('GET', '/api/v1/banner?type=top-banner'),
@@ -20,22 +20,21 @@ const TopBanner = () => {
   return (
     <SmoothRender
       isLoaded={hasData}
-      height='36px'
+      // height='36px'
       duration='700ms'
       delay='300ms'
-    >
-     <Link
-        href={data?.url}
-        className="block"
-        style={{
-          backgroundImage: `url('${data?.image}')`,
-          backgroundPosition: 'center',
-          backgroundSize: 'cover',
-          height: '36px',
-        }}
+      className='h-auto'
       >
-      </Link>
-    </SmoothRender>
+      <Link
+          href={data?.url}
+          className="block bg-cover bg-center h-3 md:h-6 lg:h-[36px]"
+          style={{
+            backgroundImage: `url('${data?.image}')`,
+          }}
+        >
+        </Link>
+
+      </SmoothRender>
   );
 };
 
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