feat: convert Slider usage to Swiper

Author: wackerow

src/pages/what-is-ethereum.tsx

@@ -29,8 +29,8 @@ import { TwImage } from "@/components/Image"
 import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
-import Slider, { EmblaSlide } from "@/components/Slider"
 import StatErrorMessage from "@/components/StatErrorMessage"
+import Swiper from "@/components/Swiper"
 import Tabs from "@/components/Tabs"
 import Tooltip from "@/components/Tooltip"
 import Translation from "@/components/Translation"
@@ -114,8 +114,11 @@ const Section = ({ className, ...rest }: HTMLAttributes<HTMLDivElement>) => (
   <section className={cn("w-full px-8 py-12", className)} {...rest} />
 )
 
-export const Width60 = (props: ChildOnlyProp) => (
-  <div className="w-full flex-[3]" {...props} />
+export const Width60 = ({
+  className,
+  children,
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("w-full flex-[3]", className)}>{children}</div>
 )
 
 export const Width40 = (props: ChildOnlyProp) => (
@@ -164,6 +167,12 @@ const Image400 = ({ src }: Pick<ImageProps, "src">) => (
   <TwImage src={src} alt="" width={400} />
 )
 
+const Slide = ({ children }: ChildOnlyProp) => (
+  <div className="[&_h2,&_h3]:mt-0 relative min-w-full">
+    <Stack className="space-x-8 space-y-8">{children}</Stack>
+  </div>
+)
+
 const cachedFetchTxCount = runOnlyOnce(fetchGrowThePie)
 
 type Props = BasePageProps & {
@@ -393,57 +402,60 @@ const WhatIsEthereumPage = ({
 
           <Section>
             <TwoColumnContent>
-              <Width60>
+              <Width60 className="lg:max-w-[60%]">
                 <H2>
                   {t("page-what-is-ethereum-why-would-i-use-ethereum-title")}
                 </H2>
-                <Stack className="gap-6">
+                <Stack className="max-w-full gap-6">
                   <p>{t("page-what-is-ethereum-why-would-i-use-ethereum-1")}</p>
                   <p>{t("page-what-is-ethereum-why-would-i-use-ethereum-2")}</p>
 
-                  <Slider
-                    onSlideChange={(index) => {
-                      trackCustomEvent({
-                        eventCategory: `What is Ethereum - Slider`,
-                        eventAction: `Clicked`,
-                        eventName: slides[index].eventName,
-                      })
-                    }}
-                  >
-                    <EmblaSlide>
-                      <H3>{t("page-what-is-ethereum-slide-1-title")}</H3>
-                      <Stack className="mb-4 gap-6">
-                        <p>
-                          <Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-1-desc-1" />
-                        </p>
-                        <p>{t("page-what-is-ethereum-slide-1-desc-2")}</p>
-                      </Stack>
-                    </EmblaSlide>
-                    <EmblaSlide>
-                      <H3>{t("page-what-is-ethereum-slide-2-title")}</H3>
-                      <Stack className="mb-4 gap-6">
-                        <p>{t("page-what-is-ethereum-slide-2-desc-1")}</p>
-                        <p>
-                          <Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-2-desc-2" />
-                        </p>
-                      </Stack>
-                    </EmblaSlide>
-                    <EmblaSlide>
-                      <H3>{t("page-what-is-ethereum-slide-3-title")}</H3>
-                      <Stack className="mb-4 gap-6">
-                        <p>
-                          <Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-3-desc-1" />
-                        </p>
-                      </Stack>
-                    </EmblaSlide>
-                    <EmblaSlide>
-                      <H3>{t("page-what-is-ethereum-slide-4-title")}</H3>
-                      <Stack className="mb-4 gap-6">
-                        <p>{t("page-what-is-ethereum-slide-4-desc-1")}</p>
-                        <p>{t("page-what-is-ethereum-slide-4-desc-2")}</p>
-                      </Stack>
-                    </EmblaSlide>
-                  </Slider>
+                  <div className="max-w-full">
+                    <Swiper
+                      containerClassName="p-8 border rounded"
+                      onSlideChange={({ activeIndex }) => {
+                        trackCustomEvent({
+                          eventCategory: `What is Ethereum - Slider`,
+                          eventAction: `Clicked`,
+                          eventName: slides[activeIndex].eventName,
+                        })
+                      }}
+                    >
+                      <Slide>
+                        <H3>{t("page-what-is-ethereum-slide-1-title")}</H3>
+                        <Stack className="mb-4 gap-6">
+                          <p>
+                            <Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-1-desc-1" />
+                          </p>
+                          <p>{t("page-what-is-ethereum-slide-1-desc-2")}</p>
+                        </Stack>
+                      </Slide>
+                      <Slide>
+                        <H3>{t("page-what-is-ethereum-slide-2-title")}</H3>
+                        <Stack className="mb-4 gap-6">
+                          <p>{t("page-what-is-ethereum-slide-2-desc-1")}</p>
+                          <p>
+                            <Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-2-desc-2" />
+                          </p>
+                        </Stack>
+                      </Slide>
+                      <Slide>
+                        <H3>{t("page-what-is-ethereum-slide-3-title")}</H3>
+                        <Stack className="mb-4 gap-6">
+                          <p>
+                            <Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-3-desc-1" />
+                          </p>
+                        </Stack>
+                      </Slide>
+                      <Slide>
+                        <H3>{t("page-what-is-ethereum-slide-4-title")}</H3>
+                        <Stack className="mb-4 gap-6">
+                          <p>{t("page-what-is-ethereum-slide-4-desc-1")}</p>
+                          <p>{t("page-what-is-ethereum-slide-4-desc-2")}</p>
+                        </Stack>
+                      </Slide>
+                    </Swiper>
+                  </div>
                 </Stack>
               </Width60>
               <Width40>