Skip to content

Commit 1afedb1

Browse files
wackerowwackerow
committed
refactor: use ui/swiper
wrapping Swiper with SwiperContainer
1 parent db239f7 commit 1afedb1

File tree

2 files changed

+115
-111
lines changed

2 files changed

+115
-111
lines changed

‎src/pages/index.tsx

Lines changed: 69 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ import CalendarAdd from "@/components/icons/calendar-add.svg"
2828
import { TwImage } from "@/components/Image"
2929
import MainArticle from "@/components/MainArticle"
3030
import PageMetadata from "@/components/PageMetadata"
31-
import Swiper from "@/components/Swiper"
3231
import { TranslatathonBanner } from "@/components/Translatathon/TranslatathonBanner"
3332
import { Button, ButtonLink } from "@/components/ui/buttons/Button"
3433
import {
@@ -48,6 +47,7 @@ import {
4847
SectionTag,
4948
} from "@/components/ui/section"
5049
import { SkeletonLines } from "@/components/ui/skeleton"
50+
import { Swiper, SwiperContainer } from "@/components/ui/swiper"
5151
import WindowBox from "@/components/WindowBox"
5252

5353
import { cn } from "@/lib/utils/cn"
@@ -265,32 +265,34 @@ const HomePage = ({
265265
</div>
266266

267267
{/* Mobile */}
268-
<Swiper
269-
effect="cards"
270-
containerClassName={cn(
268+
<SwiperContainer
269+
className={cn(
271270
"lg:hidden", // Mobile only
272271
"[&_.swiper-slide]:overflow-visible [&_.swiper-slide]:rounded-2xl [&_.swiper-slide]:shadow-card-hover",
273272
"[&_.swiper]:mx-auto [&_.swiper]:mt-4 [&_.swiper]:!flex [&_.swiper]:h-fit [&_.swiper]:max-w-128 [&_.swiper]:flex-col [&_.swiper]:items-center"
274273
)}
275-
onSlideChange={({ activeIndex }) => {
276-
trackCustomEvent({
277-
eventCategory: "Homepage",
278-
eventAction: "mobile use cases",
279-
eventName: `swipe to card ${activeIndex + 1}`,
280-
})
281-
}}
282274
>
283-
{bentoItems.map(({ className, ...item }) => (
284-
<BentoCard
285-
key={item.title}
286-
imgHeight={220}
287-
{...item}
288-
className={cn(className, "bg-background text-body")}
289-
imgWidth={undefined} // Intentionally last to override box
290-
/>
291-
))}
292-
</Swiper>
293-
275+
<Swiper
276+
effect="cards"
277+
onSlideChange={({ activeIndex }) => {
278+
trackCustomEvent({
279+
eventCategory: "Homepage",
280+
eventAction: "mobile use cases",
281+
eventName: `swipe to card ${activeIndex + 1}`,
282+
})
283+
}}
284+
>
285+
{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+
/>
293+
))}
294+
</Swiper>
295+
</SwiperContainer>
294296
{/* Desktop */}
295297
{bentoItems.map(({ className, ...item }) => (
296298
<BentoCard
@@ -658,50 +660,51 @@ const HomePage = ({
658660
</h3>
659661
<p>{t("page-index:page-index-posts-subtitle")}</p>
660662

661-
<Swiper
662-
containerClassName="mt-4 md:mt-16"
663-
spaceBetween={32}
664-
breakpoints={{
665-
[breakpointAsNumber.sm]: {
666-
slidesPerView: 2,
667-
slidesPerGroup: 2,
668-
},
669-
[breakpointAsNumber.lg]: {
670-
slidesPerView: 3,
671-
slidesPerGroup: 3,
672-
},
673-
}}
674-
>
675-
{rssItems.map(({ pubDate, title, source, link, imgSrc }) => (
676-
<Card
677-
key={title}
678-
href={link}
679-
customEventOptions={{
680-
eventCategory: "Homepage",
681-
eventAction: "blogs_posts",
682-
eventName: source,
683-
}}
684-
>
685-
<CardBanner>
686-
{/* eslint-disable-next-line @next/next/no-img-element */}
687-
<img src={imgSrc} alt="" loading="lazy" />
688-
</CardBanner>
689-
<CardContent>
690-
<CardTitle>{title}</CardTitle>
691-
{isValidDate(pubDate) && (
692-
<CardSubTitle>
693-
{new Intl.DateTimeFormat(locale, {
694-
month: "long",
695-
day: "numeric",
696-
year: "numeric",
697-
}).format(new Date(pubDate))}
698-
</CardSubTitle>
699-
)}
700-
<CardHighlight>{source}</CardHighlight>
701-
</CardContent>
702-
</Card>
703-
))}
704-
</Swiper>
663+
<SwiperContainer className="mt-4 md:mt-16">
664+
<Swiper
665+
spaceBetween={32}
666+
breakpoints={{
667+
[breakpointAsNumber.sm]: {
668+
slidesPerView: 2,
669+
slidesPerGroup: 2,
670+
},
671+
[breakpointAsNumber.lg]: {
672+
slidesPerView: 3,
673+
slidesPerGroup: 3,
674+
},
675+
}}
676+
>
677+
{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>
705+
))}
706+
</Swiper>
707+
</SwiperContainer>
705708

706709
<div className="mt-8 flex flex-col gap-4 rounded-2xl border p-8">
707710
<p className="text-lg">{t("page-index:page-index-posts-action")}</p>

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

Lines changed: 46 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -30,13 +30,13 @@ import MainArticle from "@/components/MainArticle"
3030
import PageMetadata from "@/components/PageMetadata"
3131
import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
3232
import StatErrorMessage from "@/components/StatErrorMessage"
33-
import Swiper from "@/components/Swiper"
3433
import Tabs from "@/components/Tabs"
3534
import Tooltip from "@/components/Tooltip"
3635
import Translation from "@/components/Translation"
3736
import { Button, ButtonLink } from "@/components/ui/buttons/Button"
3837
import { Center, Flex, HStack, Stack, VStack } from "@/components/ui/flex"
3938
import InlineLink from "@/components/ui/Link"
39+
import { Swiper, SwiperContainer } from "@/components/ui/swiper"
4040

4141
import { cn } from "@/lib/utils/cn"
4242
import { existsNamespace } from "@/lib/utils/existsNamespace"
@@ -409,50 +409,51 @@ const WhatIsEthereumPage = ({
409409
<p>{t("page-what-is-ethereum-why-would-i-use-ethereum-2")}</p>
410410

411411
<div className="max-w-full">
412-
<Swiper
413-
containerClassName="p-8 border rounded bg-background"
414-
onSlideChange={({ activeIndex }) => {
415-
trackCustomEvent({
416-
eventCategory: `What is Ethereum - Slider`,
417-
eventAction: `Clicked`,
418-
eventName: slides[activeIndex].eventName,
419-
})
420-
}}
421-
>
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>
429-
</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>
438-
</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>
446-
</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>
453-
</div>
454-
</Slide>
455-
</Swiper>
412+
<SwiperContainer className="rounded border bg-background p-8">
413+
<Swiper
414+
onSlideChange={({ activeIndex }) => {
415+
trackCustomEvent({
416+
eventCategory: `What is Ethereum - Slider`,
417+
eventAction: `Clicked`,
418+
eventName: slides[activeIndex].eventName,
419+
})
420+
}}
421+
>
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>
429+
</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>
438+
</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>
446+
</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>
453+
</div>
454+
</Slide>
455+
</Swiper>
456+
</SwiperContainer>
456457
</div>
457458
</Stack>
458459
</Width60>

0 commit comments

Comments
 (0)