feat: migrate what-is-ethereum to ssr

Use dynamic loading for client components with loading skeletons

Author: wackerow

app/[locale]/what-is-ethereum/_components/WhatTabs.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import Translation from "@/components/Translation"
+import { Stack } from "@/components/ui/flex"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
+import useTranslation from "@/hooks/useTranslation"
+
+const WhatTabs = () => {
+  const { t } = useTranslation("page-what-is-ethereum")
+  const tabs = [
+    {
+      title: t("page-what-is-ethereum-blockchain-tab-title"),
+      eventName: "Blockchain tab",
+      content: (
+        <p>
+          <Translation id="page-what-is-ethereum:page-what-is-ethereum-blockchain-tab-content" />
+        </p>
+      ),
+    },
+    {
+      title: t("page-what-is-ethereum-cryptocurrency-tab-title"),
+      eventName: "Cryptocurrency tab",
+      content: (
+        <Stack className="gap-6">
+          <p>
+            <Translation id="page-what-is-ethereum:page-what-is-ethereum-cryptocurrency-tab-content-1" />
+          </p>
+          <p>
+            <Translation id="page-what-is-ethereum:page-what-is-ethereum-cryptocurrency-tab-content-2" />
+          </p>
+          <p>
+            <Translation id="page-what-is-ethereum:page-what-is-ethereum-cryptocurrency-tab-content-3" />
+          </p>
+        </Stack>
+      ),
+    },
+  ] as const
+
+  return (
+    <Tabs
+      defaultValue="0"
+      onValueChange={(index) => {
+        trackCustomEvent({
+          eventCategory: `Blockchain/crypto tab`,
+          eventAction: `Clicked`,
+          eventName: tabs[index].eventName,
+        })
+      }}
+    >
+      <TabsList>
+        {tabs.map((tab, index) => (
+          <TabsTrigger key={index} value={index.toString()}>
+            {tab.title}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      {tabs.map((tab, index) => (
+        <TabsContent key={index} value={index.toString()}>
+          {tab.content}
+        </TabsContent>
+      ))}
+    </Tabs>
+  )
+}
+
+export default WhatTabs

app/[locale]/what-is-ethereum/_components/WhySlider.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import type { ChildOnlyProp } from "@/lib/types"
+
+import Translation from "@/components/Translation"
+import {
+  Swiper,
+  SwiperContainer,
+  SwiperNavigation,
+  SwiperSlide,
+} from "@/components/ui/swiper"
+
+import { trackCustomEvent } from "@/lib/utils/matomo"
+
+import useTranslation from "@/hooks/useTranslation"
+
+const H3 = (props: ChildOnlyProp) => (
+  <h3 className="text-xl font-semibold leading-xs md:text-2xl" {...props} />
+)
+
+const WhySlider = () => {
+  const { t } = useTranslation("page-what-is-ethereum")
+
+  const slides = [
+    { eventName: "Payments slide" },
+    { eventName: "Time of crisis slide" },
+    { eventName: "Creators slide" },
+    { eventName: "Gamers slide" },
+  ]
+
+  return (
+    <SwiperContainer className="rounded border bg-background p-8">
+      <Swiper
+        onSlideChange={({ activeIndex }) => {
+          trackCustomEvent({
+            eventCategory: `What is Ethereum - Slider`,
+            eventAction: `Clicked`,
+            eventName: slides[activeIndex].eventName,
+          })
+        }}
+      >
+        <SwiperSlide>
+          <div className="space-y-8">
+            <H3>{t("page-what-is-ethereum-slide-1-title")}</H3>
+            <div className="mb-4 flex flex-col 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>
+            </div>
+          </div>
+        </SwiperSlide>
+        <SwiperSlide>
+          <div className="space-y-8">
+            <H3>{t("page-what-is-ethereum-slide-2-title")}</H3>
+            <div className="mb-4 flex flex-col 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>
+            </div>
+          </div>
+        </SwiperSlide>
+        <SwiperSlide>
+          <div className="space-y-8">
+            <H3>{t("page-what-is-ethereum-slide-3-title")}</H3>
+            <div className="mb-4 flex flex-col gap-6">
+              <p>
+                <Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-3-desc-1" />
+              </p>
+            </div>
+          </div>
+        </SwiperSlide>
+        <SwiperSlide>
+          <div className="space-y-8">
+            <H3>{t("page-what-is-ethereum-slide-4-title")}</H3>
+            <div className="mb-4 flex flex-col gap-6">
+              <p>{t("page-what-is-ethereum-slide-4-desc-1")}</p>
+              <p>{t("page-what-is-ethereum-slide-4-desc-2")}</p>
+            </div>
+          </div>
+        </SwiperSlide>
+        <SwiperNavigation />
+      </Swiper>
+    </SwiperContainer>
+  )
+}
+
+export default WhySlider