From 36601aba6017aeef16f89351eb487238402ab52e Mon Sep 17 00:00:00 2001
From: it-fixcomart <it@fixcomart.co.id>
Date: Tue, 24 Sep 2024 16:12:50 +0700
Subject: <iman> update Perapihan Tag

---
 .../modules/promo/components/PromotinProgram.jsx   | 223 +++++++++++++--------
 1 file changed, 139 insertions(+), 84 deletions(-)

(limited to 'src-migrate/modules/promo/components/PromotinProgram.jsx')

diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
index 33839944..43e4eedf 100644
--- a/src-migrate/modules/promo/components/PromotinProgram.jsx
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import Image from 'next/image';
-import { InfoIcon } from "lucide-react";
-import MobileView from '../../../../src/core/components/views/MobileView';
-import DesktopView from '@/core/components/views/DesktopView';
-import { Swiper, SwiperProps, SwiperSlide }  from 'swiper/react';
+import { InfoIcon } from 'lucide-react';
+import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import useDevice from '@/core/hooks/useDevice';
 
@@ -11,9 +9,12 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
   const { isMobile } = useDevice();
   return (
     <>
-      <div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div>
+      <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>
+        {' '}
+        Serba Serbi Promo
+      </h1>
       <div className='px-4 sm:px-0'>
-          {/* <div className='w-full h-full '>
+        {/* <div className='w-full h-full '>
               <div
                 onClick={() => onSelectPromo('Diskon')}
                 className={`border p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Diskon' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
@@ -39,93 +40,147 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
                 </div>
               </div>
             </div> */}
-           
-          <Swiper slidesPerView={isMobile ? 1.3 : 3} spaceBetween={10}>
-            <SwiperSlide>
-              <div className='w-full h-full  '>
-                <div
-                  onClick={() => onSelectPromo('Bundling')}
-                  className={`border h-full p-1 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-                >
-                  <div>
-                    <Image
-                      width={24}
-                      height={24}
-                      quality={100}
-                      src='/images/icon_promo/silat.svg'
-                      alt=''
-                      className='h-12 w-12 rounded'
-                    />
-                  </div>
-                  <div >
-                    <div className='flex w-full flex-row items-center  justify-start'>
-                      <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1>
-                      <InfoIcon className='mt-[1px] text-red-500' size={14} />
-                    </div>
-                    <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}>
-                      Pilihan bundling barang kombinasi Silat.
-                    </p>
+
+        <Swiper slidesPerView={isMobile ? 1.3 : 3} spaceBetween={10}>
+          <SwiperSlide>
+            <div className='w-full h-full  '>
+              <div
+                onClick={() => onSelectPromo('Bundling')}
+                className={`border h-full p-1 flex items-center gap-x-2 rounded-lg cursor-pointer ${
+                  selectedPromo === 'Bundling'
+                    ? 'bg-red-50 border-red-500 text-red-500'
+                    : 'border-gray-200 text-gray-900'
+                }`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={85}
+                    src='/images/icon_promo/silat.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div>
+                  <div className='flex w-full flex-row items-center  justify-start'>
+                    <h1
+                      className={`mr-1 font-semibold text-base ${
+                        selectedPromo === 'Bundling'
+                          ? 'text-red-500'
+                          : 'text-gray-900'
+                      }`}
+                    >
+                      Paket Silat
+                    </h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
                   </div>
+                  <p
+                    className={`text-xs md:text-sm ${
+                      selectedPromo === 'Bundling'
+                        ? 'text-red-500'
+                        : 'text-gray-500'
+                    }`}
+                  >
+                    Pilihan bundling barang kombinasi Silat.
+                  </p>
                 </div>
               </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className='w-full h-full '>
-                <div
-                  onClick={() => onSelectPromo('Loading')}
-                  className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-                >
-                  <div>
-                    <Image
-                      width={24}
-                      height={24}
-                      quality={100}
-                      src='/images/icon_promo/barong.svg'
-                      alt=''
-                      className='h-12 w-12 rounded'
-                    />
-                  </div>
-                  <div>
-                    <div className='flex w-full flex-row items-center justify-start'>
-                      <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1>
-                      <InfoIcon className='mt-[1px] text-red-500' size={14} />
-                    </div>
-                    <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}>
-                      Beli banyak barang/partai barang borong.
-                    </p>
+            </div>
+          </SwiperSlide>
+          <SwiperSlide>
+            <div className='w-full h-full '>
+              <div
+                onClick={() => onSelectPromo('Loading')}
+                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${
+                  selectedPromo === 'Loading'
+                    ? 'bg-red-50 border-red-500 text-red-500'
+                    : 'border-gray-200 text-gray-900'
+                }`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={85}
+                    src='/images/icon_promo/barong.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div>
+                  <div className='flex w-full flex-row items-center justify-start'>
+                    <h1
+                      className={`mr-1 font-semibold text-base ${
+                        selectedPromo === 'Loading'
+                          ? 'text-red-500'
+                          : 'text-gray-900'
+                      }`}
+                    >
+                      Paket Barong
+                    </h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
                   </div>
+                  <p
+                    className={`text-xs md:text-sm ${
+                      selectedPromo === 'Loading'
+                        ? 'text-red-500'
+                        : 'text-gray-500'
+                    }`}
+                  >
+                    Beli banyak barang/partai barang borong.
+                  </p>
                 </div>
               </div>
-            </SwiperSlide>
-            <SwiperSlide>
-              <div className='w-full h-full '>
-                <div
-                  onClick={() => onSelectPromo('Merchandise')}
-                  className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`}
-                >
-                  <div>
-                    <Image
-                      width={24}
-                      height={24}
-                      quality={100}
-                      src='/images/icon_promo/angklung.svg'
-                      alt=''
-                      className='h-12 w-12 rounded'
-                    />
-                  </div>
-                  <div >
-                    <div className='flex w-full flex-row items-center justify-start '>
-                      <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1>
-                      <InfoIcon className='mt-[1px] text-red-500' size={14} />
-                    </div>
-                    <p className={`  m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}>
-                      Gratis barang promosi/merchandise menang langsung.
-                    </p>
+            </div>
+          </SwiperSlide>
+          <SwiperSlide>
+            <div className='w-full h-full '>
+              <div
+                onClick={() => onSelectPromo('Merchandise')}
+                className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${
+                  selectedPromo === 'Merchandise'
+                    ? 'bg-red-50 border-red-500 text-red-500'
+                    : 'border-gray-200 text-gray-900'
+                }`}
+              >
+                <div>
+                  <Image
+                    width={24}
+                    height={24}
+                    quality={85}
+                    src='/images/icon_promo/angklung.svg'
+                    alt=''
+                    className='h-12 w-12 rounded'
+                  />
+                </div>
+                <div>
+                  <div className='flex w-full flex-row items-center justify-start '>
+                    <h1
+                      className={`mr-1 font-semibold text-base ${
+                        selectedPromo === 'Merchandise'
+                          ? 'text-red-500'
+                          : 'text-gray-900'
+                      }`}
+                    >
+                      Paket Angklung
+                    </h1>
+                    <InfoIcon className='mt-[1px] text-red-500' size={14} />
                   </div>
+                  <p
+                    className={`  m1 text-xs md:text-sm ${
+                      selectedPromo === 'Merchandise'
+                        ? 'text-red-500'
+                        : 'text-gray-500'
+                    }`}
+                  >
+                    Gratis barang promosi/merchandise menang langsung.
+                  </p>
                 </div>
               </div>
-            </SwiperSlide>
-          </Swiper>
+            </div>
+          </SwiperSlide>
+        </Swiper>
       </div>
     </>
   );
-- 
cgit v1.2.3