diff options
| -rw-r--r-- | src-migrate/components/ui/smooth-render.tsx | 12 | ||||
| -rw-r--r-- | src-migrate/modules/product-promo/components/Section.tsx | 4 | ||||
| -rw-r--r-- | src/components/ui/HeroBanner.jsx | 78 | ||||
| -rw-r--r-- | src/core/components/elements/Navbar/TopBanner.jsx | 6 |
4 files changed, 53 insertions, 47 deletions
diff --git a/src-migrate/components/ui/smooth-render.tsx b/src-migrate/components/ui/smooth-render.tsx index 0e9a4096..5de3b28d 100644 --- a/src-migrate/components/ui/smooth-render.tsx +++ b/src-migrate/components/ui/smooth-render.tsx @@ -4,9 +4,9 @@ import clsxm from '~/libs/clsxm' type Props = { children: React.ReactNode, isLoaded: boolean, - height: number, - duration?: number - delay?: number + height: string, + duration?: string + delay?: string } & React.HTMLProps<HTMLDivElement> const SmoothRender = (props: Props) => { @@ -26,9 +26,9 @@ const SmoothRender = (props: Props) => { className={clsxm('overflow-y-hidden transition-all', className)} style={{ opacity: isLoaded ? 1 : 0, - height: isLoaded ? `${height}px` : 0, - transitionDuration: `${duration}ms`, - transitionDelay: `${delay}ms`, + height: isLoaded ? height : 0, + transitionDuration: duration || '', + transitionDelay: delay || '', ...style }} {...rest} diff --git a/src-migrate/modules/product-promo/components/Section.tsx b/src-migrate/modules/product-promo/components/Section.tsx index b3c6e671..5fc0da4c 100644 --- a/src-migrate/modules/product-promo/components/Section.tsx +++ b/src-migrate/modules/product-promo/components/Section.tsx @@ -27,8 +27,8 @@ const ProductPromoSection = ({ productId }: Props) => { return ( <SmoothRender isLoaded={(promotions?.data && promotions?.data.length > 0) || false} - height={450} - duration={700} + height='450px' + duration='700ms' > <ProductPromoModal /> diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx index 6cf7902c..9a62465d 100644 --- a/src/components/ui/HeroBanner.jsx +++ b/src/components/ui/HeroBanner.jsx @@ -1,42 +1,43 @@ // Swiper -import { Swiper, SwiperSlide } from 'swiper/react' -import { Pagination, Autoplay } from 'swiper' -import 'swiper/css' -import 'swiper/css/pagination' -import 'swiper/css/autoplay' +import { Autoplay, Pagination } from 'swiper'; +import 'swiper/css'; +import 'swiper/css/autoplay'; +import 'swiper/css/pagination'; +import { Swiper, SwiperSlide } from 'swiper/react'; -import DesktopView from '@/core/components/views/DesktopView' -import MobileView from '@/core/components/views/MobileView' -import { useMemo } from 'react' -import Link from '@/core/components/elements/Link/Link' -import Image from 'next/image' -import { useQuery } from 'react-query' -import { bannerApi } from '@/api/bannerApi' -import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton' +import Image from 'next/image'; +import { useMemo } from 'react'; +import { useQuery } from 'react-query'; + +import { bannerApi } from '@/api/bannerApi'; +import Link from '@/core/components/elements/Link/Link'; +import DesktopView from '@/core/components/views/DesktopView'; +import MobileView from '@/core/components/views/MobileView'; +import SmoothRender from '~/components/ui/smooth-render'; const swiperBanner = { autoplay: { delay: 6000, - disableOnInteraction: false + disableOnInteraction: false, }, modules: [Pagination, Autoplay], loop: true, className: 'border border-gray_r-6 min-h-full', - slidesPerView: 1 -} + slidesPerView: 1, +}; const HeroBanner = () => { - const heroBanner = useQuery('heroBanner', bannerApi({ type: 'index-a-1' })) + const heroBanner = useQuery('heroBanner', bannerApi({ type: 'index-a-1' })); const swiperBannerMobile = { ...swiperBanner, - pagination: { dynamicBullets: true, clickable: true } - } + pagination: { dynamicBullets: true, clickable: true }, + }; const swiperBannerDesktop = { ...swiperBanner, - pagination: { dynamicBullets: false, clickable: true } - } + pagination: { dynamicBullets: false, clickable: true }, + }; const BannerComponent = useMemo(() => { return heroBanner.data?.map((banner, index) => ( @@ -51,24 +52,29 @@ const HeroBanner = () => { /> </Link> </SwiperSlide> - )) - }, [heroBanner.data]) - - if (heroBanner.isLoading) return <HeroBannerSkeleton /> + )); + }, [heroBanner.data]); return ( - heroBanner.data && ( - <> - <MobileView> + <> + <MobileView> + <SmoothRender + isLoaded={heroBanner.data?.length > 0} + height='68vw' + duration='750ms' + delay='100ms' + > <Swiper {...swiperBannerMobile}>{BannerComponent}</Swiper> - </MobileView> + </SmoothRender> + </MobileView> - <DesktopView> + <DesktopView> + {heroBanner.data?.length > 0 && ( <Swiper {...swiperBannerDesktop}>{BannerComponent}</Swiper> - </DesktopView> - </> - ) - ) -} + )} + </DesktopView> + </> + ); +}; -export default HeroBanner +export default HeroBanner; diff --git a/src/core/components/elements/Navbar/TopBanner.jsx b/src/core/components/elements/Navbar/TopBanner.jsx index ff5b1d90..ded2857f 100644 --- a/src/core/components/elements/Navbar/TopBanner.jsx +++ b/src/core/components/elements/Navbar/TopBanner.jsx @@ -18,9 +18,9 @@ const TopBanner = () => { return ( <SmoothRender isLoaded={hasData} - height={36} - duration={700} - delay={500} + height='36px' + duration='700ms' + delay='500ms' style={{ backgroundColor }} > <Link href={data?.url}> |