Skip to content

Commit c22de2d

Browse files
corwintinescorwintines
authored
Merge pull request #15749 from ethereum/ssr-what-is-ethereum
feat: migrate /what-is-ethereum page to ssr, add loaders
2 parents 1280dcc + 277016e commit c22de2d

File tree

15 files changed

+1008
-871
lines changed

15 files changed

+1008
-871
lines changed

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

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
"use client"
2+
3+
import Translation from "@/components/Translation"
4+
import { Stack } from "@/components/ui/flex"
5+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
6+
7+
import { trackCustomEvent } from "@/lib/utils/matomo"
8+
9+
import useTranslation from "@/hooks/useTranslation"
10+
11+
const WhatTabs = () => {
12+
const { t } = useTranslation("page-what-is-ethereum")
13+
const tabs = [
14+
{
15+
title: t("page-what-is-ethereum-blockchain-tab-title"),
16+
eventName: "Blockchain tab",
17+
content: (
18+
<p>
19+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-blockchain-tab-content" />
20+
</p>
21+
),
22+
},
23+
{
24+
title: t("page-what-is-ethereum-cryptocurrency-tab-title"),
25+
eventName: "Cryptocurrency tab",
26+
content: (
27+
<Stack className="gap-6">
28+
<p>
29+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-cryptocurrency-tab-content-1" />
30+
</p>
31+
<p>
32+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-cryptocurrency-tab-content-2" />
33+
</p>
34+
<p>
35+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-cryptocurrency-tab-content-3" />
36+
</p>
37+
</Stack>
38+
),
39+
},
40+
] as const
41+
42+
return (
43+
<Tabs
44+
defaultValue="0"
45+
onValueChange={(index) => {
46+
trackCustomEvent({
47+
eventCategory: `Blockchain/crypto tab`,
48+
eventAction: `Clicked`,
49+
eventName: tabs[index].eventName,
50+
})
51+
}}
52+
>
53+
<TabsList>
54+
{tabs.map((tab, index) => (
55+
<TabsTrigger key={index} value={index.toString()}>
56+
{tab.title}
57+
</TabsTrigger>
58+
))}
59+
</TabsList>
60+
{tabs.map((tab, index) => (
61+
<TabsContent key={index} value={index.toString()}>
62+
{tab.content}
63+
</TabsContent>
64+
))}
65+
</Tabs>
66+
)
67+
}
68+
69+
export default WhatTabs

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import dynamic from "next/dynamic"
2+
3+
import Loading from "./loading"
4+
5+
export default dynamic(() => import("."), { ssr: false, loading: Loading })

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { Skeleton, SkeletonLines } from "@/components/ui/skeleton"
2+
3+
const Loading = () => (
4+
<>
5+
<div className="mb-4 flex w-2/3 gap-4 border-b py-4">
6+
<Skeleton className="flex-1" />
7+
<Skeleton className="flex-1" />
8+
</div>
9+
<div className="h-fit rounded-lg border p-8">
10+
<SkeletonLines noOfLines={5} className="pt-0" />
11+
</div>
12+
</>
13+
)
14+
export default Loading

‎app/[locale]/what-is-ethereum/_components/WhySwiper/index.tsx

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
"use client"
2+
3+
import type { ChildOnlyProp } from "@/lib/types"
4+
5+
import Translation from "@/components/Translation"
6+
import {
7+
Swiper,
8+
SwiperContainer,
9+
SwiperNavigation,
10+
SwiperSlide,
11+
} from "@/components/ui/swiper"
12+
13+
import { trackCustomEvent } from "@/lib/utils/matomo"
14+
15+
import useTranslation from "@/hooks/useTranslation"
16+
17+
const H3 = (props: ChildOnlyProp) => (
18+
<h3 className="text-xl font-semibold leading-xs md:text-2xl" {...props} />
19+
)
20+
21+
const WhySwiper = () => {
22+
const { t } = useTranslation("page-what-is-ethereum")
23+
24+
const slides = [
25+
{ eventName: "Payments slide" },
26+
{ eventName: "Time of crisis slide" },
27+
{ eventName: "Creators slide" },
28+
{ eventName: "Gamers slide" },
29+
]
30+
31+
return (
32+
<SwiperContainer className="rounded border bg-background p-8">
33+
<Swiper
34+
onSlideChange={({ activeIndex }) => {
35+
trackCustomEvent({
36+
eventCategory: `What is Ethereum - Slider`,
37+
eventAction: `Clicked`,
38+
eventName: slides[activeIndex].eventName,
39+
})
40+
}}
41+
>
42+
<SwiperSlide>
43+
<div className="space-y-8">
44+
<H3>{t("page-what-is-ethereum-slide-1-title")}</H3>
45+
<div className="mb-4 flex flex-col gap-6">
46+
<p>
47+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-1-desc-1" />
48+
</p>
49+
<p>{t("page-what-is-ethereum-slide-1-desc-2")}</p>
50+
</div>
51+
</div>
52+
</SwiperSlide>
53+
<SwiperSlide>
54+
<div className="space-y-8">
55+
<H3>{t("page-what-is-ethereum-slide-2-title")}</H3>
56+
<div className="mb-4 flex flex-col gap-6">
57+
<p>{t("page-what-is-ethereum-slide-2-desc-1")}</p>
58+
<p>
59+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-2-desc-2" />
60+
</p>
61+
</div>
62+
</div>
63+
</SwiperSlide>
64+
<SwiperSlide>
65+
<div className="space-y-8">
66+
<H3>{t("page-what-is-ethereum-slide-3-title")}</H3>
67+
<div className="mb-4 flex flex-col gap-6">
68+
<p>
69+
<Translation id="page-what-is-ethereum:page-what-is-ethereum-slide-3-desc-1" />
70+
</p>
71+
</div>
72+
</div>
73+
</SwiperSlide>
74+
<SwiperSlide>
75+
<div className="space-y-8">
76+
<H3>{t("page-what-is-ethereum-slide-4-title")}</H3>
77+
<div className="mb-4 flex flex-col gap-6">
78+
<p>{t("page-what-is-ethereum-slide-4-desc-1")}</p>
79+
<p>{t("page-what-is-ethereum-slide-4-desc-2")}</p>
80+
</div>
81+
</div>
82+
</SwiperSlide>
83+
<SwiperNavigation />
84+
</Swiper>
85+
</SwiperContainer>
86+
)
87+
}
88+
89+
export default WhySwiper

‎app/[locale]/what-is-ethereum/_components/WhySwiper/lazy.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import dynamic from "next/dynamic"
2+
3+
import Loading from "./loading"
4+
5+
export default dynamic(() => import("."), { ssr: false, loading: Loading })

‎app/[locale]/what-is-ethereum/_components/WhySwiper/loading.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Skeleton, SkeletonLines } from "@/components/ui/skeleton"
2+
3+
const Loading = () => (
4+
<div className="h-fit space-y-8 rounded border bg-background p-8">
5+
<SkeletonLines noOfLines={5} />
6+
<SkeletonLines noOfLines={5} />
7+
<Skeleton className="mx-auto h-5 w-40 rounded-full" />
8+
</div>
9+
)
10+
11+
export default Loading

0 commit comments

Comments
 (0)