<iman> update all-promotion

1 files changed, 95 insertions, 0 deletions

diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx
new file mode 100644
index 00000000..a7e5dfef
--- /dev/null
+++ b/src-migrate/modules/promo/components/PromotinProgram.jsx
@@ -0,0 +1,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 mb-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;