diff options
Diffstat (limited to 'src/lib/home')
| -rw-r--r-- | src/lib/home/components/CategoryPilihan.jsx | 2 | ||||
| -rw-r--r-- | src/lib/home/components/PromotionProgram.jsx | 70 |
2 files changed, 71 insertions, 1 deletions
diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 5548fc1b..6efc1070 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -20,7 +20,7 @@ const CategoryPilihan = ({ id, categories }) => { <div className='flex w-full h-48 bg-red-300 mb-4'> {heroBanner.data && heroBanner.data?.length > 0 && ( - <div className='px-4 sm:px-0 object-fill '> + <div key={heroBanner.data.id} className='px-4 sm:px-0 object-fill '> {/* {heroBanner.data?.map((banner) => ( */} <Link key={heroBanner.data[0].id} href={heroBanner.data[0].url}> <Image diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx new file mode 100644 index 00000000..99258d94 --- /dev/null +++ b/src/lib/home/components/PromotionProgram.jsx @@ -0,0 +1,70 @@ +import Link from '@/core/components/elements/Link/Link' +import Image from 'next/image' +import { bannerApi } from '@/api/bannerApi'; +import useDevice from '@/core/hooks/useDevice' +import { Swiper, SwiperSlide } from 'swiper/react'; +const { useQuery } = require('react-query') +const BannerSection = () => { + const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' })); + const { isMobile, isDesktop } = useDevice() + + return ( + <div className='px-4 sm:px-0'> + <div className='flex justify-between items-center mb-4 '> + <div className='font-semibold sm:text-h-lg'>Promo Tersedia</div> + {isDesktop && ( + <Link href='/shop/promo' className='!text-red-500 font-semibold'> + Lihat Semua + </Link> + )} + {isMobile && ( + <Link href='/shop/promo' className='!text-red-500 font-semibold sm:text-h-sm'> + Lihat Semua + </Link> + )} + </div> + {isDesktop && (promotionProgram.data && + promotionProgram.data?.length > 0 && ( + <div className='grid grid-cols-3 sm:grid-cols-3 gap-4 rounded-md'> + {promotionProgram.data?.map((banner) => ( + <Link key={banner.id} href={banner.url}> + <Image + width={439} + height={150} + quality={100} + src={banner.image} + alt={banner.name} + className='h-auto w-full rounded hover:scale-105 transition duration-500 ease-in-out' + /> + </Link> + ))} + </div> + + ))} + +{isMobile && ( + + <Swiper slidesPerView={1.1} spaceBetween={8} freeMode> + {promotionProgram.data?.map((banner) => ( + <SwiperSlide key={banner.id}> + <Link key={banner.id} href={banner.url}> + <Image + width={439} + height={150} + quality={100} + src={banner.image} + alt={banner.name} + className='h-auto w-full rounded ' + /> + </Link> + </SwiperSlide> + ))} + </Swiper> + + )} + </div> + + ) +} + +export default BannerSection |