From 8876e48c35f41b77e61ba90bd95ab4c993d67e9e Mon Sep 17 00:00:00 2001
From: "HATEC\\SPVDEV001" <tri.susilo@altama.co.id>
Date: Mon, 27 Mar 2023 11:27:48 +0700
Subject: page search & page brand

---
 src/lib/brand/components/Brand.jsx | 128 ++++++++++++++++++++++++++-----------
 1 file changed, 89 insertions(+), 39 deletions(-)

(limited to 'src/lib/brand/components/Brand.jsx')

diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index c338c4c4..db4e81da 100644
--- a/src/lib/brand/components/Brand.jsx
+++ b/src/lib/brand/components/Brand.jsx
@@ -8,6 +8,8 @@ import 'swiper/css/pagination'
 import 'swiper/css/autoplay'
 import Divider from '@/core/components/elements/Divider/Divider'
 import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
+import MobileView from '@/core/components/views/MobileView'
+import DesktopView from '@/core/components/views/DesktopView'
 
 const swiperBanner = {
   pagination: { dynamicBullets: true },
@@ -23,46 +25,94 @@ const Brand = ({ id }) => {
 
   return (
     <>
-      <div className='min-h-[150px]'>
-        {brand.isLoading && <ImageSkeleton />}
-        {brand.data && (
-          <>
-            <Swiper
-              slidesPerView={1}
-              pagination={swiperBanner.pagination}
-              modules={swiperBanner.modules}
-              autoplay={swiperBanner.autoplay}
-              className='border-b border-gray_r-6'
-            >
-              {brand.data?.banners?.map((banner, index) => (
-                <SwiperSlide key={index}>
-                  <Image
-                    src={banner}
-                    alt={`Brand ${brand.data?.name} - Indoteknik`}
-                    className='w-full h-auto'
-                  />
-                </SwiperSlide>
-              ))}
-            </Swiper>
-            <div className='p-4'>
-              <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div>
-              {brand?.data?.logo && (
-                <Image
-                  src={brand?.data?.logo}
-                  alt={brand?.data?.name}
-                  className='w-32 p-2 border borde-gray_r-6 rounded'
-                />
-              )}
-              {!brand?.data?.logo && (
-                <div className='bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'>
-                  {brand?.data?.name}
+      <MobileView>
+        <>
+          <div className='min-h-[150px]'>
+            {brand.isLoading && <ImageSkeleton />}
+            {brand.data && (
+              <>
+                <Swiper
+                  slidesPerView={1}
+                  pagination={swiperBanner.pagination}
+                  modules={swiperBanner.modules}
+                  autoplay={swiperBanner.autoplay}
+                  className='border-b border-gray_r-6'
+                >
+                  {brand.data?.banners?.map((banner, index) => (
+                    <SwiperSlide key={index}>
+                      <Image
+                        src={banner}
+                        alt={`Brand ${brand.data?.name} - Indoteknik`}
+                        className='w-full h-auto'
+                      />
+                    </SwiperSlide>
+                  ))}
+                </Swiper>
+                <div className='p-4'>
+                  <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div>
+                  {brand?.data?.logo && (
+                    <Image
+                      src={brand?.data?.logo}
+                      alt={brand?.data?.name}
+                      className='w-32 p-2 border borde-gray_r-6 rounded'
+                    />
+                  )}
+                  {!brand?.data?.logo && (
+                    <div className='bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'>
+                      {brand?.data?.name}
+                    </div>
+                  )}
                 </div>
-              )}
-            </div>
-          </>
-        )}
-      </div>
-      <Divider />
+              </>
+            )}
+          </div>
+          <Divider />
+        </>
+      </MobileView>
+      <DesktopView>
+        <div className='container mx-auto mt-10 mb-3'>
+          <div className='min-h-[150px]'>
+            {brand.isLoading && <ImageSkeleton />}
+            {brand.data && (
+              <>
+                <Swiper
+                  slidesPerView={1}
+                  pagination={swiperBanner.pagination}
+                  modules={swiperBanner.modules}
+                  autoplay={swiperBanner.autoplay}
+                  className='border-b border-gray_r-6'
+                >
+                  {brand.data?.banners?.map((banner, index) => (
+                    <SwiperSlide key={index}>
+                      <Image
+                        src={banner}
+                        alt={`Brand ${brand.data?.name} - Indoteknik`}
+                        className='w-full h-auto'
+                      />
+                    </SwiperSlide>
+                  ))}
+                </Swiper>
+                <div className='p-4'>
+                  <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div>
+                  {brand?.data?.logo && (
+                    <Image
+                      src={brand?.data?.logo}
+                      alt={brand?.data?.name}
+                      className='w-32 p-2 border borde-gray_r-6 rounded'
+                    />
+                  )}
+                  {!brand?.data?.logo && (
+                    <div className='bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'>
+                      {brand?.data?.name}
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+          </div>
+          <Divider />
+        </div>
+      </DesktopView>
     </>
   )
 }
-- 
cgit v1.2.3