diff options
Diffstat (limited to 'src-migrate/modules/promo/components/HeroDiskon.tsx')
| -rw-r--r-- | src-migrate/modules/promo/components/HeroDiskon.tsx | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/src-migrate/modules/promo/components/HeroDiskon.tsx b/src-migrate/modules/promo/components/HeroDiskon.tsx new file mode 100644 index 00000000..6d38c763 --- /dev/null +++ b/src-migrate/modules/promo/components/HeroDiskon.tsx @@ -0,0 +1,137 @@ +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 { getBanner } from '~/services/banner'; +import style from '../styles/hero.module.css'; +import 'swiper/css/navigation'; +import { Autoplay, Navigation, Pagination } from 'swiper'; + +const swiperBanner: SwiperProps = { + modules:[Navigation, Pagination, Autoplay], + autoplay: { + delay: 6000, + disableOnInteraction: false + }, + loop: true, + className: 'h-[400px] w-full', + slidesPerView: 1, + spaceBetween: 10, + navigation:true, +} +const swiperBanner2: SwiperProps = { + modules: [Pagination, Autoplay], + autoplay: { + delay: 5000, + }, + loop: true, + className: 'h-[400px] w-full', + slidesPerView: 1, + spaceBetween: 10, +} + +const Hero = () => { + const bannerQuery = useQuery({ + queryKey: ['banner.all-promo'], + queryFn: () => getBanner({ type: 'banner-promotion' }) + }) + + const banners = useMemo(() => bannerQuery.data || [], [bannerQuery.data]); + + useEffect(() => { + if (banners.length > 1) { + swiperBanner.slidesPerView = 1; + swiperBanner.loop = true; + } + }, [banners]); + + return ( + + <div className="grid grid-cols-3 gap-4"> + <div className="row-span-2 h-[446px] flex items-center "> + <Swiper {...swiperBanner}> + {banners.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + src={banner.image} + alt={banner.name} + width={666} + height={480} + className='w-[446px] h-[446px] object-fill object-center rounded-2xl' + /> + </SwiperSlide> + ))} + </Swiper> + </div> + <div className="w-[400px] h-[217px] "> + <Swiper {...swiperBanner2}> + {banners.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + src={banner.image} + alt={banner.name} + width={666} + height={450} + className='w-[400px] h-[217px] object-cover object-center rounded-2xl ' + /> + </SwiperSlide> + ))} + </Swiper> + </div> + <div className="w-[400px] h-[217px]"> + <Swiper {...swiperBanner2}> + {banners.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + src={banner.image} + alt={banner.name} + width={666} + height={450} + className='w-[400px] h-[217px] object-cover object-center rounded-2xl' + /> + </SwiperSlide> + ))} + </Swiper> + </div> + <div className="w-[400px] h-[217px]"> + <Swiper {...swiperBanner2}> + {banners.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + src={banner.image} + alt={banner.name} + width={666} + height={450} + className='w-[400px] h-[217px] object-cover object-center rounded-2xl' + /> + </SwiperSlide> + ))} + </Swiper> + </div> + <div className="w-[400px] h-[217px]"> + <Swiper {...swiperBanner2}> + {banners.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + src={banner.image} + alt={banner.name} + width={666} + height={450} + className='w-[400px] h-[217px] object-cover object-center rounded-2xl' + /> + </SwiperSlide> + ))} + </Swiper> + </div> + + </div> + + + + ) +} + +export default Hero
\ No newline at end of file |