blob: 13a8405bb7380d0eaa706527599be2d2e74eed41 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
import React from 'react';
import Image from 'next/image';
import { InfoIcon } from "lucide-react"
const PromotionProgram = ({ selectedPromo, onSelectPromo }) => {
return (
<>
<div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div>
<div className='px-4 sm:px-0'>
<div className='grid md:grid-cols-3 grid-cols-2 justify-between gap-2 items-center'>
<div className='w-full'>
<div
onClick={() => onSelectPromo('Bundling')}
className={`border p-2 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-20 w-20 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>
</div>
<div className='w-full'>
<div
onClick={() => onSelectPromo('Loading')}
className={`border p-2 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-20 w-20 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>
</div>
<div className='w-full'>
<div
onClick={() => onSelectPromo('Merchandise')}
className={`border p-2 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-20 w-20 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>
</div>
</div>
</div>
</>
);
};
export default PromotionProgram;
|
