summaryrefslogtreecommitdiff
path: root/src/lib
diff options
context:
space:
mode:
Diffstat (limited to 'src/lib')
-rw-r--r--src/lib/product/components/Product/ProductDesktop.jsx28
-rw-r--r--src/lib/product/components/Product/ProductMobile.jsx8
-rw-r--r--src/lib/promotinProgram/components/HomePage.jsx69
-rw-r--r--src/lib/promotinProgram/components/PromotionType.jsx110
4 files changed, 215 insertions, 0 deletions
diff --git a/src/lib/product/components/Product/ProductDesktop.jsx b/src/lib/product/components/Product/ProductDesktop.jsx
index 75b37b9d..c3addbb9 100644
--- a/src/lib/product/components/Product/ProductDesktop.jsx
+++ b/src/lib/product/components/Product/ProductDesktop.jsx
@@ -14,6 +14,7 @@ import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import ProductCard from '../ProductCard'
import productSimilarApi from '../../api/productSimilarApi'
import whatsappUrl from '@/core/utils/whatsappUrl'
+import PromotionType from '@/lib/promotinProgram/components/PromotionType'
const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
const router = useRouter()
@@ -21,6 +22,7 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
const [lowestPrice, setLowestPrice] = useState(null)
const [addCartAlert, setAddCartAlert] = useState(false)
+ const [promotionType, setPromotionType] = useState(false)
const getLowestPrice = useCallback(() => {
const prices = product.variants.map((variant) => variant.price)
@@ -156,6 +158,12 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
)}
</div>
</div>
+ <div className='pt-3'>
+ <div className='text-h-lg font-semibold'>Promotion Program</div>
+ <div className='flex mt-3'>
+ <PromotionType></PromotionType>
+ </div>
+ </div>
</div>
</div>
@@ -229,6 +237,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
</span>
)}
</h3>
+ <div className='mt-5'>
+ <button
+ type='button'
+ onClick={() => setPromotionType(true)}
+ className='text-gray-900 flex items-center justify-center rounded-lg bg-white border font-medium border-gray-300 hover:bg-gray-100 py-2.5 h-[50px] w-[100%]'
+ >
+ <span className='text-left'>%</span>
+ <span className='text-left ml-5'>Makin Hemat Pakai Promo </span>
+ </button>
+ </div>
{product.variants.length > 1 ? (
<button
type='button'
@@ -402,6 +420,16 @@ const ProductDesktop = ({ product, wishlist, toggleWishlist }) => {
</LazyLoad>
</div>
</BottomPopup>
+ <BottomPopup
+ className='!w-[32%]'
+ title='Pakai Promo'
+ active={promotionType}
+ close={() => setPromotionType(false)}
+ >
+ <div className='flex mt-4'>
+ <PromotionType></PromotionType>
+ </div>
+ </BottomPopup>
</div>
</DesktopView>
)
diff --git a/src/lib/product/components/Product/ProductMobile.jsx b/src/lib/product/components/Product/ProductMobile.jsx
index 426fe1b8..5ed796ae 100644
--- a/src/lib/product/components/Product/ProductMobile.jsx
+++ b/src/lib/product/components/Product/ProductMobile.jsx
@@ -14,6 +14,7 @@ import { toast } from 'react-hot-toast'
import { createSlug } from '@/core/utils/slug'
import BottomPopup from '@/core/components/elements/Popup/BottomPopup'
import whatsappUrl from '@/core/utils/whatsappUrl'
+import PromotionType from '@/lib/promotinProgram/components/PromotionType'
const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
const router = useRouter()
@@ -170,6 +171,13 @@ const ProductMobile = ({ product, wishlist, toggleWishlist }) => {
<Divider />
<div className='p-4'>
+ <div className='mb-5'>
+ {/* <PromotionType></PromotionType> */}
+ <button type='button' className='text-gray-900 flex p-3 rounded-lg bg-white border border-gray-300 hover:bg-gray-100 py-2.5 w-[100%]'>
+ <span className='text-left'>%</span>
+ <span className='text-left ml-5'>Makin Hemat Pakai Promo</span>
+ </button>
+ </div>
<div>
<label className='flex justify-between'>
Pilih Varian:
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 06:58:46 +0000