Skip to content

Commit 140ec03

Browse files
wackerowwackerow
committed
refactor: export SwiperNavigation and SwiperSlide
SwiperSlide imported from library and exported unchanged for convenience
1 parent e609ee6 commit 140ec03

File tree

3 files changed

+105
-85
lines changed

3 files changed

+105
-85
lines changed

‎src/components/ui/swiper.tsx

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,20 @@ const SwiperNavContainer = React.forwardRef<
9999
))
100100
SwiperNavContainer.displayName = "SwiperNavContainer"
101101

102-
type SwiperProps = SwiperReactProps & {
103-
navigation?: React.ReactNode
104-
children: React.ReactNode[]
105-
}
106-
const Swiper = React.forwardRef<SwiperRef, SwiperProps>(
107-
({ children, navigation, ...props }, ref) => {
102+
const SwiperNavigation = React.forwardRef<
103+
HTMLDivElement,
104+
React.HTMLAttributes<HTMLDivElement>
105+
>((props, ref) => (
106+
<SwiperNavContainer ref={ref} {...props}>
107+
<SwiperPrevButton />
108+
<SwiperPaginationDots />
109+
<SwiperNextButton />
110+
</SwiperNavContainer>
111+
))
112+
SwiperNavigation.displayName = "SwiperNavigation"
113+
114+
const Swiper = React.forwardRef<SwiperRef, SwiperReactProps>(
115+
({ children, ...props }, ref) => {
108116
const { t } = useTranslation("common")
109117
return (
110118
<SwiperReact
@@ -129,16 +137,7 @@ const Swiper = React.forwardRef<SwiperRef, SwiperProps>(
129137
slideClass="swiper-slide"
130138
{...props}
131139
>
132-
{children.map((child, index) => (
133-
<SwiperSlide key={index}>{child}</SwiperSlide>
134-
))}
135-
{navigation || (
136-
<SwiperNavContainer>
137-
<SwiperPrevButton />
138-
<SwiperPaginationDots />
139-
<SwiperNextButton />
140-
</SwiperNavContainer>
141-
)}
140+
{children}
142141
</SwiperReact>
143142
)
144143
}
@@ -150,7 +149,9 @@ export {
150149
SwiperContainer,
151150
SwiperNavButton,
152151
SwiperNavContainer,
152+
SwiperNavigation,
153153
SwiperNextButton,
154154
SwiperPaginationDots,
155155
SwiperPrevButton,
156+
SwiperSlide,
156157
}

‎src/pages/index.tsx

Lines changed: 44 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,12 @@ import {
4747
SectionTag,
4848
} from "@/components/ui/section"
4949
import { SkeletonLines } from "@/components/ui/skeleton"
50-
import { Swiper, SwiperContainer } from "@/components/ui/swiper"
50+
import {
51+
Swiper,
52+
SwiperContainer,
53+
SwiperNavigation,
54+
SwiperSlide,
55+
} from "@/components/ui/swiper"
5156
import WindowBox from "@/components/WindowBox"
5257

5358
import { cn } from "@/lib/utils/cn"
@@ -283,14 +288,16 @@ const HomePage = ({
283288
}}
284289
>
285290
{bentoItems.map(({ className, ...item }) => (
286-
<BentoCard
287-
key={item.title}
288-
imgHeight={220}
289-
{...item}
290-
className={cn(className, "bg-background text-body")}
291-
imgWidth={undefined} // Intentionally last to override box
292-
/>
291+
<SwiperSlide key={item.title}>
292+
<BentoCard
293+
imgHeight={220}
294+
{...item}
295+
className={cn(className, "bg-background text-body")}
296+
imgWidth={undefined} // Intentionally last to override box
297+
/>
298+
</SwiperSlide>
293299
))}
300+
<SwiperNavigation />
294301
</Swiper>
295302
</SwiperContainer>
296303
{/* Desktop */}
@@ -675,34 +682,36 @@ const HomePage = ({
675682
}}
676683
>
677684
{rssItems.map(({ pubDate, title, source, link, imgSrc }) => (
678-
<Card
679-
key={title}
680-
href={link}
681-
customEventOptions={{
682-
eventCategory: "Homepage",
683-
eventAction: "blogs_posts",
684-
eventName: source,
685-
}}
686-
>
687-
<CardBanner>
688-
{/* eslint-disable-next-line @next/next/no-img-element */}
689-
<img src={imgSrc} alt="" loading="lazy" />
690-
</CardBanner>
691-
<CardContent>
692-
<CardTitle>{title}</CardTitle>
693-
{isValidDate(pubDate) && (
694-
<CardSubTitle>
695-
{new Intl.DateTimeFormat(locale, {
696-
month: "long",
697-
day: "numeric",
698-
year: "numeric",
699-
}).format(new Date(pubDate))}
700-
</CardSubTitle>
701-
)}
702-
<CardHighlight>{source}</CardHighlight>
703-
</CardContent>
704-
</Card>
685+
<SwiperSlide key={title}>
686+
<Card
687+
href={link}
688+
customEventOptions={{
689+
eventCategory: "Homepage",
690+
eventAction: "blogs_posts",
691+
eventName: source,
692+
}}
693+
>
694+
<CardBanner>
695+
{/* eslint-disable-next-line @next/next/no-img-element */}
696+
<img src={imgSrc} alt="" loading="lazy" />
697+
</CardBanner>
698+
<CardContent>
699+
<CardTitle>{title}</CardTitle>
700+
{isValidDate(pubDate) && (
701+
<CardSubTitle>
702+
{new Intl.DateTimeFormat(locale, {
703+
month: "long",
704+
day: "numeric",
705+
year: "numeric",
706+
}).format(new Date(pubDate))}
707+
</CardSubTitle>
708+
)}
709+
<CardHighlight>{source}</CardHighlight>
710+
</CardContent>
711+
</Card>
712+
</SwiperSlide>
705713
))}
714+
<SwiperNavigation />
706715
</Swiper>
707716
</SwiperContainer>
708717

‎src/pages/what-is-ethereum.tsx

Lines changed: 44 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,12 @@ import Translation from "@/components/Translation"
3636
import { Button, ButtonLink } from "@/components/ui/buttons/Button"
3737
import { Center, Flex, HStack, Stack, VStack } from "@/components/ui/flex"
3838
import InlineLink from "@/components/ui/Link"
39-
import { Swiper, SwiperContainer } from "@/components/ui/swiper"
39+
import {
40+
Swiper,
41+
SwiperContainer,
42+
SwiperNavigation,
43+
SwiperSlide,
44+
} from "@/components/ui/swiper"
4045

4146
import { cn } from "@/lib/utils/cn"
4247
import { existsNamespace } from "@/lib/utils/existsNamespace"
@@ -167,10 +172,6 @@ const Image400 = ({ src }: Pick<ImageProps, "src">) => (
167172
<TwImage src={src} alt="" width={400} />
168173
)
169174

170-
const Slide = ({ children }: ChildOnlyProp) => (
171-
<div className="space-y-8">{children}</div>
172-
)
173-
174175
const cachedFetchTxCount = runOnlyOnce(fetchGrowThePie)
175176

176177
type Props = BasePageProps & {
@@ -419,39 +420,48 @@ const WhatIsEthereumPage = ({
419420
})
420421
}}
421422
>
422-
<Slide>
423-
<H3>{t("page-what-is-ethereum-slide-1-title")}</H3>
424-
<div className="mb-4 flex flex-col gap-6">
425-
<p>
426-
<Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-1-desc-1" />
427-
</p>
428-
<p>{t("page-what-is-ethereum-slide-1-desc-2")}</p>
423+
<SwiperSlide>
424+
<div className="space-y-8">
425+
<H3>{t("page-what-is-ethereum-slide-1-title")}</H3>
426+
<div className="mb-4 flex flex-col gap-6">
427+
<p>
428+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-1-desc-1" />
429+
</p>
430+
<p>{t("page-what-is-ethereum-slide-1-desc-2")}</p>
431+
</div>
429432
</div>
430-
</Slide>
431-
<Slide>
432-
<H3>{t("page-what-is-ethereum-slide-2-title")}</H3>
433-
<div className="mb-4 flex flex-col gap-6">
434-
<p>{t("page-what-is-ethereum-slide-2-desc-1")}</p>
435-
<p>
436-
<Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-2-desc-2" />
437-
</p>
433+
</SwiperSlide>
434+
<SwiperSlide>
435+
<div className="space-y-8">
436+
<H3>{t("page-what-is-ethereum-slide-2-title")}</H3>
437+
<div className="mb-4 flex flex-col gap-6">
438+
<p>{t("page-what-is-ethereum-slide-2-desc-1")}</p>
439+
<p>
440+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-2-desc-2" />
441+
</p>
442+
</div>
438443
</div>
439-
</Slide>
440-
<Slide>
441-
<H3>{t("page-what-is-ethereum-slide-3-title")}</H3>
442-
<div className="mb-4 flex flex-col gap-6">
443-
<p>
444-
<Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-3-desc-1" />
445-
</p>
444+
</SwiperSlide>
445+
<SwiperSlide>
446+
<div className="space-y-8">
447+
<H3>{t("page-what-is-ethereum-slide-3-title")}</H3>
448+
<div className="mb-4 flex flex-col gap-6">
449+
<p>
450+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-3-desc-1" />
451+
</p>
452+
</div>
446453
</div>
447-
</Slide>
448-
<Slide>
449-
<H3>{t("page-what-is-ethereum-slide-4-title")}</H3>
450-
<div className="mb-4 flex flex-col gap-6">
451-
<p>{t("page-what-is-ethereum-slide-4-desc-1")}</p>
452-
<p>{t("page-what-is-ethereum-slide-4-desc-2")}</p>
454+
</SwiperSlide>
455+
<SwiperSlide>
456+
<div className="space-y-8">
457+
<H3>{t("page-what-is-ethereum-slide-4-title")}</H3>
458+
<div className="mb-4 flex flex-col gap-6">
459+
<p>{t("page-what-is-ethereum-slide-4-desc-1")}</p>
460+
<p>{t("page-what-is-ethereum-slide-4-desc-2")}</p>
461+
</div>
453462
</div>
454-
</Slide>
463+
</SwiperSlide>
464+
<SwiperNavigation />
455465
</Swiper>
456466
</SwiperContainer>
457467
</div>

0 commit comments

Comments
 (0)