diff options
5 files changed, 24 insertions, 100 deletions
diff --git a/src-migrate/modules/promo/components/FlashSale.tsx b/src-migrate/modules/promo/components/FlashSale.tsx index dac0365c..16cb7647 100644 --- a/src-migrate/modules/promo/components/FlashSale.tsx +++ b/src-migrate/modules/promo/components/FlashSale.tsx @@ -12,7 +12,7 @@ const FlashSale = dynamic( const FlashSalePromo = ()=> { return( <> - <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>Bayar Setengahnya!</h1> + <h1 className='text-h-sm md:text-h-lg font-semibold'>Bayar Setengahnya!</h1> <FlashSale/> </> ) diff --git a/src-migrate/modules/promo/components/PromoList.jsx b/src-migrate/modules/promo/components/PromoList.jsx index 529d54a1..a7356d71 100644 --- a/src-migrate/modules/promo/components/PromoList.jsx +++ b/src-migrate/modules/promo/components/PromoList.jsx @@ -73,7 +73,7 @@ const PromoList = ({ selectedPromo }) => { }, [slug, setPromoItems, setPromoData, setIsLoading]); return ( - <div className='h-[420px]'> + <div className='min-h-[360px]'> <div className='flex justify-between items-center'> <h1 className='text-h-sm md:text-h-lg font-semibold py-4'>{title}</h1> <div> @@ -87,10 +87,10 @@ const PromoList = ({ selectedPromo }) => { <LogoSpinner width={48} height={48} /> </div> ) : ( - <Swiper slidesPerView={isMobile ? 1.5 : 3.25} spaceBetween={12} freeMode > + <Swiper slidesPerView={isMobile ? 1.2 : 3.25} spaceBetween={12} freeMode > {promoData?.map((promotion) => ( <SwiperSlide key={promotion.id}> - <div className="min-w-[380px] max-w-[380px] mb-[20px] sm:min-w-[330px] md:min-w-[360px] lg:min-w-[380px] xl:min-w-[380px]"> + <div className="min-w-36 max-w-[400px] mb-[20px] sm:w-full md:w-full lg:w-full xl:w-full"> <ProductPromoCard promotion={promotion} /> </div> </SwiperSlide> diff --git a/src-migrate/modules/promo/components/PromotinProgram.jsx b/src-migrate/modules/promo/components/PromotinProgram.jsx index 7770d372..33839944 100644 --- a/src-migrate/modules/promo/components/PromotinProgram.jsx +++ b/src-migrate/modules/promo/components/PromotinProgram.jsx @@ -5,14 +5,14 @@ import MobileView from '../../../../src/core/components/views/MobileView'; import DesktopView from '@/core/components/views/DesktopView'; import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react'; import 'swiper/css'; +import useDevice from '@/core/hooks/useDevice'; const PromotionProgram = ({ selectedPromo, onSelectPromo }) => { + const { isMobile } = useDevice(); return ( <> <div className="text-h-sm md:text-h-lg font-semibold py-4">Serba Serbi Promo</div> <div className='px-4 sm:px-0'> - <DesktopView> - <div className='grid md:grid-cols-3 grid-cols-2 justify-between h-[90px] gap-3 items-center'> {/* <div className='w-full h-full '> <div onClick={() => onSelectPromo('Diskon')} @@ -39,88 +39,8 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => { </div> </div> </div> */} - <div className='w-full h-full '> - <div - onClick={() => onSelectPromo('Bundling')} - className={`border h-full p-2 flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Bundling' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div> - <Image - width={24} - height={24} - quality={100} - src='/images/icon_promo/silat.svg' - alt='' - className='h-12 w-12 rounded' - /> - </div> - <div> - <div className='flex w-full flex-row items-center justify-start'> - <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-900'}`}>Paket Silat</h1> - <InfoIcon className='mt-[1px] text-red-500' size={14} /> - </div> - <p className={`text-xs md:text-sm ${selectedPromo === 'Bundling' ? 'text-red-500' : 'text-gray-500'}`}> - Pilihan bundling barang kombinasi Silat. - </p> - </div> - </div> - </div> - <div className='w-full h-full '> - <div - onClick={() => onSelectPromo('Loading')} - className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Loading' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div> - <Image - width={24} - height={24} - quality={100} - src='/images/icon_promo/barong.svg' - alt='' - className='h-12 w-12 rounded' - /> - </div> - <div> - <div className='flex w-full flex-row items-center justify-start'> - <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-900'}`}>Paket Barong</h1> - <InfoIcon className='mt-[1px] text-red-500' size={14} /> - </div> - <p className={`text-xs md:text-sm ${selectedPromo === 'Loading' ? 'text-red-500' : 'text-gray-500'}`}> - Beli banyak barang/partai barang borong. - </p> - </div> - </div> - </div> - <div className='w-full h-full '> - <div - onClick={() => onSelectPromo('Merchandise')} - className={`border p-2 h-full flex items-center gap-x-2 rounded-lg cursor-pointer ${selectedPromo === 'Merchandise' ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} - > - <div> - <Image - width={24} - height={24} - quality={100} - src='/images/icon_promo/angklung.svg' - alt='' - className='h-12 w-12 rounded' - /> - </div> - <div > - <div className='flex w-full flex-row items-center justify-start '> - <h1 className={`mr-1 font-semibold text-base ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-900'}`}>Paket Angklung</h1> - <InfoIcon className='mt-[1px] text-red-500' size={14} /> - </div> - <p className={` m1 text-xs md:text-sm ${selectedPromo === 'Merchandise' ? 'text-red-500' : 'text-gray-500'}`}> - Gratis barang promosi/merchandise menang langsung. - </p> - </div> - </div> - </div> - </div> - </DesktopView> - <MobileView> - <Swiper slidesPerView={1.75} spaceBetween={10}> + + <Swiper slidesPerView={isMobile ? 1.3 : 3} spaceBetween={10}> <SwiperSlide> <div className='w-full h-full '> <div @@ -206,7 +126,6 @@ const PromotionProgram = ({ selectedPromo, onSelectPromo }) => { </div> </SwiperSlide> </Swiper> - </MobileView> </div> </> ); diff --git a/src-migrate/modules/promo/components/Voucher.tsx b/src-migrate/modules/promo/components/Voucher.tsx index 14d3c301..397134e8 100644 --- a/src-migrate/modules/promo/components/Voucher.tsx +++ b/src-migrate/modules/promo/components/Voucher.tsx @@ -5,25 +5,27 @@ import { getVoucher } from '~/services/voucher' import style from '../styles/voucher.module.css' import Image from 'next/image' import { useToast } from '@chakra-ui/react' +import useDevice from '@/core/hooks/useDevice'; -const swiperVoucher: SwiperProps = { - autoplay: { - delay: 6000, - disableOnInteraction: false - }, - loop: false, - className: 'h-[160px] w-full', - slidesPerView: 3, - spaceBetween: 16 -} const Voucher = () => { + const { isMobile } = useDevice(); const toast = useToast(); const voucherQuery = useQuery({ queryKey: ['voucher.all-voucher'], queryFn: getVoucher }) - + + const swiperVoucher: SwiperProps = { + autoplay: { + delay: 6000, + disableOnInteraction: false + }, + loop: false, + className: 'h-[160px] w-full', + slidesPerView: isMobile ? 1.2 : 3, + spaceBetween: 16 + } const vouchers = useMemo(() => voucherQuery.data || [], [voucherQuery.data]); const copyText = (text: string) => { diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx index 38fcdef8..cde68515 100644 --- a/src/core/components/elements/Sidebar/Sidebar.jsx +++ b/src/core/components/elements/Sidebar/Sidebar.jsx @@ -117,6 +117,9 @@ const Sidebar = ({ active, close }) => { </> )} </div> + <SidebarLink className={itemClassName} href='/shop/promo'> + Semua Promo + </SidebarLink> <SidebarLink className={itemClassName} href='/shop/brands'> Semua Brand </SidebarLink> |