summaryrefslogtreecommitdiff
path: root/src-migrate
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate')
-rw-r--r--src-migrate/modules/promo/components/FlashSale.tsx1
-rw-r--r--src-migrate/modules/promo/components/Hero.tsx53
-rw-r--r--src-migrate/modules/promo/components/PromoList.tsx (renamed from src-migrate/modules/promo/components/PromoList.jsx)39
3 files changed, 58 insertions, 35 deletions
diff --git a/src-migrate/modules/promo/components/FlashSale.tsx b/src-migrate/modules/promo/components/FlashSale.tsx
index 16cb7647..c0259396 100644
--- a/src-migrate/modules/promo/components/FlashSale.tsx
+++ b/src-migrate/modules/promo/components/FlashSale.tsx
@@ -12,7 +12,6 @@ const FlashSale = dynamic(
const FlashSalePromo = ()=> {
return(
<>
- <h1 className='text-h-sm md:text-h-lg font-semibold'>Bayar Setengahnya!</h1>
<FlashSale/>
</>
)
diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index b6e27270..b91288dd 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -10,11 +10,13 @@ import 'swiper/css/pagination';
import { Navigation, Pagination, Autoplay } from 'swiper';
import MobileView from '../../../../src/core/components/views/MobileView';
import DesktopView from '@/core/components/views/DesktopView';
-import { getPromotionProgramSolr } from '~/services/promotionProgram';
+import {bannerApi} from '../../../../src/api/bannerApi'
interface IPromotionProgram {
- banner_s: string;
- name_s: string;
+ headline_banner: string;
+ description_banner: string;
+ image: string ;
+ name: string;
}
const swiperBanner: SwiperProps = {
@@ -41,46 +43,43 @@ const swiperBannerMob = {
};
const Hero = () => {
- const bannerQuery = useQuery({
- queryKey: ['banner.all-promo'],
- queryFn: getPromotionProgramSolr,
- });
+ const heroBanner = useQuery('heroBannerSecondary', bannerApi({ type: 'banner-promotion' }))
const banners: IPromotionProgram[] = useMemo(
- () => bannerQuery.data?.response?.docs || [],
- [bannerQuery.data]
+ () => heroBanner?.data || [],
+ [heroBanner.data]
);
const swiperBannerMobile = {
...swiperBannerMob,
pagination: { dynamicBullets: false, clickable: true },
};
+
return (
<>
<DesktopView>
<div className={style['wrapper']}>
- <div className={style['desc-section']}>
- <div className={style['title']}>Pasti Hemat & Untung Selama Belanja di Indoteknik.com!</div>
- <div className='h-4' />
- <div className={style['subtitle']}>Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai! </div>
- </div>
-
- <div className={style['banner-section']}>
<Swiper {...swiperBanner}>
{banners.map((banner, index) => (
- <SwiperSlide key={index}>
- <Image
- src={banner.banner_s}
- alt={banner.name_s}
- width={666}
- height={450}
- quality={100}
- className='w-full h-full object-fit object-center rounded-2xl' />
+ <SwiperSlide key={index} className='flex flex-row'>
+ <div className={style['desc-section']}>
+ <div className={style['title']}>{banner.headline_banner? banner.headline_banner : "Pasti Hemat & Untung Selama Belanja di Indoteknik.com!"}</div>
+ <div className='h-4' />
+ <div className={style['subtitle']}>{banner.description_banner? banner.description_banner : "Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!"}</div>
+ </div>
+ <div className={style['banner-section']}>
+ <Image
+ src={banner.image}
+ alt={banner.name}
+ width={666}
+ height={450}
+ quality={100}
+ className='w-full h-full object-fit object-center rounded-2xl' />
+ </div>
</SwiperSlide>
))}
</Swiper>
- </div>
</div>
</DesktopView>
<MobileView>
@@ -91,8 +90,8 @@ const Hero = () => {
width={439}
height={150}
quality={100}
- src={banner.banner_s}
- alt={banner.name_s}
+ src={banner.image}
+ alt={banner.name}
className='w-full h-full object-cover object-center rounded-2xl'
/>
</SwiperSlide>
diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.tsx
index e6add893..42725034 100644
--- a/src-migrate/modules/promo/components/PromoList.jsx
+++ b/src-migrate/modules/promo/components/PromoList.tsx
@@ -1,16 +1,20 @@
import React, { useEffect, useState } from 'react';
import { Button, Skeleton } from '@chakra-ui/react'
import clsxm from "~/libs/clsxm"
-import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card';
+import ProductPromoCard from '../../product-promo/components/Card';
import { fetchPromoItemsSolr } from '../../../../src/api/promoApi';
import { Swiper, SwiperSlide } from 'swiper/react';
+import SwiperCore, { Navigation, Pagination } from 'swiper';
import useDevice from '@/core/hooks/useDevice';
import LogoSpinner from '../../../../src/core/components/elements/Spinner/LogoSpinner';
import usePromoStore from './promoStore';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
-import Link from '@/core/components/elements/Link/Link'
+import Link from "next/link"
+import { IPromotion } from '~/types/promotion';
+interface PromoListProps {
+ selectedPromo: string; // Tipe selectedPromo ditetapkan sebagai string
+}
-const PromoList = ({ selectedPromo }) => {
+const PromoList: React.FC<PromoListProps> = ({ selectedPromo }) => {
const {
title,
slug,
@@ -24,7 +28,16 @@ const PromoList = ({ selectedPromo }) => {
setIsLoading,
} = usePromoStore();
- const { isMobile } = useDevice();
+ const { isMobile, isDesktop } = useDevice();
+
+ const swiperBanner = {
+ modules: [Navigation],
+ className: 'h-[400px] w-full',
+ slidesPerView: isMobile ? 1.1 : 3.25,
+ spaceBetween: 10,
+ navigation:isMobile? true : false,
+ allowTouchMove:isMobile? false : true,
+ };
useEffect(() => {
if (selectedPromo === 'Bundling') {
@@ -96,11 +109,23 @@ const PromoList = ({ selectedPromo }) => {
"min-h-[340px]": promoData[0] && promoData?.length > 0
})}
>
- {promoData?.map((promotion) => (
+ {isDesktop && (
+ <Swiper {...swiperBanner}>
+ {promoData?.map((promotion: IPromotion) => (
+ <SwiperSlide key={promotion.id}>
+ <div className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full">
+ <ProductPromoCard promotion={promotion} />
+ </div>
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ )}
+ {isMobile && (promoData?.map((promotion: IPromotion) => (
<div key={promotion.id} className="min-w-[400px] max-w-[400px]">
<ProductPromoCard promotion={promotion} />
</div>
- ))}
+ )))}
+
</Skeleton>
)}
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:36:35 +0000