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