summaryrefslogtreecommitdiff
path: root/src-migrate/modules/promo/components/PromotinProgram.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules/promo/components/PromotinProgram.jsx')
-rw-r--r--src-migrate/modules/promo/components/PromotinProgram.jsx223
1 files changed, 139 insertions, 84 deletions
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>
</>
);
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:54:07 +0000