summaryrefslogtreecommitdiff
path: root/src-migrate/modules/promo/components/Hero.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src-migrate/modules/promo/components/Hero.tsx')
-rw-r--r--src-migrate/modules/promo/components/Hero.tsx33
1 files changed, 16 insertions, 17 deletions
diff --git a/src-migrate/modules/promo/components/Hero.tsx b/src-migrate/modules/promo/components/Hero.tsx
index 2701250d..b6e27270 100644
--- a/src-migrate/modules/promo/components/Hero.tsx
+++ b/src-migrate/modules/promo/components/Hero.tsx
@@ -4,14 +4,18 @@ import Image from 'next/image';
import { useEffect, useMemo } from 'react';
import { useQuery } from 'react-query';
import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
-
-import { getBanner } from '~/services/banner';
import style from '../styles/hero.module.css';
import 'swiper/css/navigation';
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';
+
+interface IPromotionProgram {
+ banner_s: string;
+ name_s: string;
+}
const swiperBanner: SwiperProps = {
modules:[Navigation, Pagination, Autoplay],
@@ -39,18 +43,13 @@ const swiperBannerMob = {
const Hero = () => {
const bannerQuery = useQuery({
queryKey: ['banner.all-promo'],
- queryFn: () => getBanner({ type: 'banner-promotion' })
- })
-
- const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]);
+ queryFn: getPromotionProgramSolr,
+ });
- useEffect(() => {
- if (banners.length > 1) {
- swiperBanner.slidesPerView = 1.1;
- swiperBanner.loop = true;
- swiperBannerMobile.loop = true;
- }
- }, [banners]);
+ const banners: IPromotionProgram[] = useMemo(
+ () => bannerQuery.data?.response?.docs || [],
+ [bannerQuery.data]
+ );
const swiperBannerMobile = {
...swiperBannerMob,
@@ -72,8 +71,8 @@ const Hero = () => {
{banners.map((banner, index) => (
<SwiperSlide key={index}>
<Image
- src={banner.image}
- alt={banner.name}
+ src={banner.banner_s}
+ alt={banner.name_s}
width={666}
height={450}
quality={100}
@@ -92,8 +91,8 @@ const Hero = () => {
width={439}
height={150}
quality={100}
- src={banner.image}
- alt={banner.name}
+ src={banner.banner_s}
+ alt={banner.name_s}
className='w-full h-full object-cover object-center rounded-2xl'
/>
</SwiperSlide>