import 'swiper/css'; import Image from 'next/image'; import { useEffect, useMemo } from 'react'; import { useQuery } from 'react-query'; import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; 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 { bannerApi } from '../../../../src/api/bannerApi'; interface IPromotionProgram { headlineBanner: string; descriptionBanner: string; image: string; name: string; } const swiperBanner: SwiperProps = { modules: [Navigation, Pagination, Autoplay], autoplay: { delay: 6000, disableOnInteraction: false, }, loop: true, className: 'h-[400px] w-full', slidesPerView: 1, spaceBetween: 10, pagination: true, }; const swiperBannerMob = { autoplay: { delay: 6000, disableOnInteraction: false, }, modules: [Pagination, Autoplay], loop: true, className: 'border border-gray_r-6 min-h-full', slidesPerView: 1, }; const Hero = () => { const heroBanner = useQuery( 'allPromo', bannerApi({ type: 'banner-semua-promo' }) ); const banners: IPromotionProgram[] = useMemo( () => heroBanner?.data || [], [heroBanner.data] ); const swiperBannerMobile = { ...swiperBannerMob, pagination: { dynamicBullets: false, clickable: true }, }; return ( <>
{banners?.map((banner, index) => (
{banner?.headlineBanner ? banner?.headlineBanner : 'Pasti Hemat & Untung Selama Belanja di Indoteknik.com!'}
{banner?.descriptionBanner ? banner?.descriptionBanner : 'Cari paket yang kami sediakan dengan penawaran harga & Nikmati kemudahan dalam setiap transaksi dengan fitur lengkap Pembayaran hingga barang sampai!'}
{banner.name}
))}
{banners?.map((banner, index) => ( {banner?.name} ))} ); }; export default Hero;