program promotion

1 files changed, 69 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