program promotion

2 files changed, 179 insertions, 0 deletions

diff --git a/src/lib/promotinProgram/components/HomePage.jsx b/src/lib/promotinProgram/components/HomePage.jsx
new file mode 100644
index 00000000..93134117
--- /dev/null
+++ b/src/lib/promotinProgram/components/HomePage.jsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import 'swiper/swiper.min.css'
+import Image from '@/core/components/elements/Image/Image'
+import useDevice from '@/core/hooks/useDevice'
+
+const HomePage = () => {
+  const [activeTab, setActiveTab] = useState('Tab 1')
+
+  const { isMobile, isDesktop } = useDevice()
+  const handleTabClick = (label) => {
+    setActiveTab(label)
+  }
+
+  const tabItems = [
+    { label: 'Tab 1', content: 'Content for Tab 1' },
+    { label: 'Tab 2', content: 'Content for Tab 2' },
+    { label: 'Tab 3', content: 'Content for Tab 3' },
+    { label: 'Tab 4', content: 'Content for Tab 4' },
+    { label: 'Tab 5', content: 'Content for Tab 5' },
+    { label: 'Tab 6', content: 'Content for Tab 6' },
+    { label: 'Tab 7', content: 'Content for Tab 7' },
+    { label: 'Tab 8', content: 'Content for Tab 8' },
+    { label: 'Tab 9', content: 'Content for Tab 9' },
+    { label: 'Tab 10', content: 'Content for Tab 10' }
+  ]
+
+  return (
+    <div className='px-4 sm:px-0'>
+      <div className='flex justify-between items-center mb-4'>
+        <div className='font-medium sm:text-h-lg'>{activeTab}</div>
+      </div>
+      <Swiper slidesPerView={isMobile ? 3.5 : 7.5} spaceBetween={isMobile ? 12 : 20}>
+        {tabItems.map((item, index) => (
+          <SwiperSlide key={index}>
+            <button
+              className={`py-1 px-2 rounded border flex justify-center items-center h-30 ${
+                activeTab === item.label ? 'border-red-500' : 'border-gray_r-6'
+              }`}
+              onClick={() => handleTabClick(item.label)}
+            >
+              {' '}
+              <Image
+                src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/10'
+                alt=''
+                className='h-full w-full object-contain object-center'
+              />
+            </button>
+          </SwiperSlide>
+        ))}
+      </Swiper>
+
+      <div className='mt-4'>
+        {tabItems.map((item, index) => (
+          <div
+            key={index}
+            className={`${
+              activeTab === item.label ? 'block' : 'hidden'
+            } bg-gray-100 p-4 rounded-md`}
+          >
+            {item.content}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default HomePage
diff --git a/src/lib/promotinProgram/components/PromotionType.jsx b/src/lib/promotinProgram/components/PromotionType.jsx
new file mode 100644
index 00000000..371aa952
--- /dev/null
+++ b/src/lib/promotinProgram/components/PromotionType.jsx
@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from 'react'
+import Image from '@/core/components/elements/Image/Image'
+
+const PromotionType = ({ isModal = true }) => {
+  const [selectedPromo, setSelectedPromo] = useState(null)
+
+  const promos = [
+    {
+      id: 1,
+      title: 'Promo 1',
+      description: 'Deskripsi Promo 1',
+      image: '/path/to/image1.jpg'
+    },
+    {
+      id: 2,
+      title: 'Promo 2',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg'
+    },
+    {
+      id: 3,
+      title: 'Promo 3',
+      description: 'Deskripsi Promo 3',
+      image: '/path/to/image3.jpg'
+    },
+    {
+      id: 4,
+      title: 'Promo 1',
+      description: 'Deskripsi Promo 1',
+      image: '/path/to/image1.jpg'
+    },
+    {
+      id: 5,
+      title: 'Promo 2',
+      description: 'Deskripsi Promo 2',
+      image: '/path/to/image2.jpg'
+    },
+    {
+      id: 6,
+      title: 'Promo 3',
+      description: 'Deskripsi Promo 3',
+      image: '/path/to/image3.jpg'
+    }
+  ]
+  const handlePromoClick = (promoId) => {
+    if (promoId == selectedPromo) {
+      setSelectedPromo(null)
+    } else {
+      setSelectedPromo(promoId)
+    }
+  }
+  return (
+    <div className={`w-full ${isModal == true ? '' : 'grid grid-cols-3 gap-1'}`}>
+      {promos.map((promo) => (
+        <div
+          key={promo.id}
+          onClick={() => handlePromoClick(promo.id)}
+          className={`p-2 rounded-lg border border-solid border-gray-300 mb-5 w-full hover:cursor-pointer ${
+            selectedPromo
+              ? selectedPromo === promo.id
+                ? 'opacity-100 border-red-500 bg-red-100'
+                : 'opacity-50  pointer-events-none'
+              : 'opacity-100'
+          } `}
+        >
+          <div className={`${isModal == true ? 'flex' : ''} items-center`}>
+            <div className=''>
+              <Image
+                src='https://placehold.co/400x400.png'
+                alt=''
+                className={`flex-1 w-full object-cover rounded-md ${isModal == true ? 'h-[100px]' : ''}`}
+              />
+            </div>
+            <div className='p-2'>
+              <h2 className='text-xl font-semibold'>{promo.title}</h2>
+              {isModal == true && <p className='text-gray-500'>{promo.description}</p>}
+            </div>
+          </div>
+        </div>
+        // <div
+        //   key={promo.id}
+        //   onClick={() => handlePromoClick(promo.id)}
+        //   className={`p-2 rounded-lg border border-solid border-gray-300 mb-5 w-full hover:cursor-pointer ${
+        //     selectedPromo
+        //       ? selectedPromo === promo.id
+        //         ? 'opacity-100 border-red-400 bg-red-100'
+        //         : 'opacity-50  pointer-events-none'
+        //       : 'opacity-100'
+        //     } `}
+        // >
+        //   <div className='items-center'>
+        //     <div className=''>
+        //       <Image
+        //         src='https://placehold.co/600x600.png'
+        //         alt=''
+        //         className='flex-1 w-full object-cover rounded-md'
+        //       />
+        //     </div>
+        //     <div className='mt-1'>
+        //       <h2 className='text-xl font-semibold'>{promo.title}</h2>
+        //       {/* <p className='text-gray-500'>{promo.description}</p> */}
+        //     </div>
+        //   </div>
+        // </div>
+      ))}
+    </div>
+  )
+}
+
+export default PromotionType