Skip to content

Commit e54da7a

Browse files
wackerowwackerow
authored
Merge pull request #15619 from ethereum/10yearintl
/10years translation setup
2 parents 237b997 + 11a399a commit e54da7a

File tree

11 files changed

+306
-263
lines changed

11 files changed

+306
-263
lines changed

‎app/[locale]/10years/_components/AdoptionSwiper.tsx

Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
"use client"
22

3+
import type { StaticImageData } from "next/image"
4+
import { useTranslations } from "next-intl"
5+
36
import { Image } from "@/components/Image"
7+
import Translation from "@/components/Translation"
48
import { ButtonLink } from "@/components/ui/buttons/Button"
59
import {
610
Swiper,
@@ -11,38 +15,50 @@ import {
1115

1216
import { cn } from "@/lib/utils/cn"
1317

14-
import { AdoptionCard } from "./types"
15-
1618
type AdoptionCardProps = {
17-
adoptionCards: AdoptionCard[]
19+
adoptionCards: { image: StaticImageData; href: string }[]
1820
adoptionStyles: string[]
1921
}
22+
2023
const AdoptionSwiper = ({
2124
adoptionCards,
2225
adoptionStyles,
2326
}: AdoptionCardProps) => {
27+
const t = useTranslations("page-10-year-anniversary")
28+
2429
return (
2530
<div className="flex flex-1 flex-col gap-6 md:hidden">
2631
<SwiperContainer className="mx-auto w-full max-w-[550px]">
2732
<Swiper spaceBetween={32}>
28-
{adoptionCards.map((card, index) => (
29-
<SwiperSlide key={card.title}>
30-
<div
31-
className={cn("h-full rounded-2xl p-8", adoptionStyles[index])}
32-
>
33-
<Image
34-
src={card.image}
35-
alt={card.title}
36-
className="mx-auto mb-4 h-36 object-contain"
37-
/>
38-
<h3 className="mb-4 text-2xl font-bold">{card.title}</h3>
39-
{card.description}
40-
<ButtonLink href={card.href} hideArrow variant="outline">
41-
{card.linkText}
42-
</ButtonLink>
43-
</div>
44-
</SwiperSlide>
45-
))}
33+
{adoptionCards.map((card, index) => {
34+
const title = t(`page-10-year-adoption-card-${index + 1}-title`)
35+
return (
36+
<SwiperSlide key={title}>
37+
<div
38+
className={cn(
39+
"h-full rounded-2xl p-8",
40+
adoptionStyles[index]
41+
)}
42+
>
43+
<Image
44+
src={card.image}
45+
alt={title}
46+
className="mx-auto mb-4 h-36 object-contain"
47+
/>
48+
<h3 className="mb-4 text-2xl font-bold">{title}</h3>
49+
<p className="mb-8">
50+
<Translation
51+
id={`page-10-year-adoption-card-${index + 1}-description`}
52+
ns="page-10-year-anniversary"
53+
/>
54+
</p>
55+
<ButtonLink href={card.href} hideArrow variant="outline">
56+
{t(`page-10-year-adoption-card-${index + 1}-link-text`)}
57+
</ButtonLink>
58+
</div>
59+
</SwiperSlide>
60+
)
61+
})}
4662
<SwiperNavigation />
4763
</Swiper>
4864
</SwiperContainer>

‎app/[locale]/10years/_components/CountDown.tsx

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,14 @@ import { useEffect, useState } from "react"
44

55
import { cn } from "@/lib/utils/cn"
66

7+
import { useTranslation } from "@/hooks/useTranslation"
8+
79
interface CountDownProps {
810
className?: string
911
}
1012

1113
const CountDown = ({ className }: CountDownProps) => {
14+
const { t } = useTranslation("page-10-year-anniversary")
1215
const [timeLeft, setTimeLeft] = useState({
1316
days: 0,
1417
hours: 0,
@@ -48,7 +51,7 @@ const CountDown = ({ className }: CountDownProps) => {
4851
if (isExpired) {
4952
return (
5053
<div className="text-center text-2xl font-bold">
51-
Ethereum is 10 years old! 🚀
54+
{t("page-10-year-countdown-expired")}
5255
</div>
5356
)
5457
}
@@ -64,7 +67,9 @@ const CountDown = ({ className }: CountDownProps) => {
6467
<div className="font-mono text-4xl font-bold text-accent-a">
6568
{timeLeft.days}
6669
</div>
67-
<div className="font-mono text-xs text-accent-a">days</div>
70+
<div className="font-mono text-xs text-accent-a">
71+
{t("page-10-year-countdown-days")}
72+
</div>
6873
</div>
6974
<div
7075
className={cn(
@@ -75,7 +80,9 @@ const CountDown = ({ className }: CountDownProps) => {
7580
<div className="font-mono text-4xl font-bold text-accent-a">
7681
{timeLeft.hours}
7782
</div>
78-
<div className="font-mono text-xs text-accent-a">hours</div>
83+
<div className="font-mono text-xs text-accent-a">
84+
{t("page-10-year-countdown-hours")}
85+
</div>
7986
</div>
8087
<div
8188
className={cn(
@@ -86,7 +93,9 @@ const CountDown = ({ className }: CountDownProps) => {
8693
<div className="font-mono text-4xl font-bold text-accent-a">
8794
{timeLeft.minutes}
8895
</div>
89-
<div className="font-mono text-xs text-accent-a">minutes</div>
96+
<div className="font-mono text-xs text-accent-a">
97+
{t("page-10-year-countdown-minutes")}
98+
</div>
9099
</div>
91100
<div
92101
className={cn(
@@ -97,7 +106,9 @@ const CountDown = ({ className }: CountDownProps) => {
97106
<div className="font-mono text-4xl font-bold text-accent-a">
98107
{timeLeft.seconds}
99108
</div>
100-
<div className="font-mono text-xs text-accent-a">seconds</div>
109+
<div className="font-mono text-xs text-accent-a">
110+
{t("page-10-year-countdown-seconds")}
111+
</div>
101112
</div>
102113
</div>
103114
)

‎app/[locale]/10years/_components/InnovationSwiper.tsx

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,11 @@ import {
1010

1111
import { innovationCards } from "./data"
1212

13+
import { useTranslation } from "@/hooks/useTranslation"
14+
1315
export default function InnovationSwiper() {
16+
const { t } = useTranslation("page-10-year-anniversary")
17+
1418
return (
1519
<div className="w-[100%]">
1620
<SwiperContainer className="mx-auto w-full max-w-[550px] xl:max-w-[700px]">
@@ -25,18 +29,23 @@ export default function InnovationSwiper() {
2529
>
2630
<Image
2731
src={card.image}
28-
alt={card.title}
32+
alt={t(`page-10-year-innovation-card-${index + 1}-title`)}
2933
className="mx-auto my-4 h-auto max-h-48 object-contain"
3034
/>
3135
<div>
32-
<h3 className="mb-4">{card.title}</h3>
33-
<p className="text-body-secondary mb-4">{card.date}</p>
34-
</div>
35-
{card.description.map((description, index) => (
36-
<p key={index} className="mb-4">
37-
{description}
36+
<h3 className="mb-4">
37+
{t(`page-10-year-innovation-card-${index + 1}-title`)}
38+
</h3>
39+
<p className="text-body-secondary mb-4">
40+
{t(`page-10-year-innovation-card-${index + 1}-date`)}
3841
</p>
39-
))}
42+
</div>
43+
<p className="mb-4">
44+
{t(`page-10-year-innovation-card-${index + 1}-description-1`)}
45+
</p>
46+
<p className="mb-4">
47+
{t(`page-10-year-innovation-card-${index + 1}-description-2`)}
48+
</p>
4049
</SwiperSlide>
4150
))}
4251
<SwiperNavigation />

‎app/[locale]/10years/_components/Stories.tsx

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { Button, ButtonLink } from "@/components/ui/buttons/Button"
77

88
import { cn } from "@/lib/utils/cn"
99

10+
import { useTranslation } from "@/hooks/useTranslation"
11+
1012
type Story = {
1113
name: string
1214
storyEnglish: string
@@ -23,6 +25,7 @@ type StoriesProps = {
2325
const STORIES_SHOWN = 5
2426

2527
const Stories = ({ stories }: StoriesProps) => {
28+
const { t } = useTranslation("page-10-year-anniversary")
2629
const [flippedCards, setFlippedCards] = useState<Record<number, boolean>>({})
2730
const [expandedStories, setExpandedStories] = useState<
2831
Record<number, boolean>
@@ -119,15 +122,15 @@ const Stories = ({ stories }: StoriesProps) => {
119122
eventCategory: "10-year-anniversary",
120123
}}
121124
>
122-
Read more
125+
{t("page-10-year-stories-read-more")}
123126
</Button>
124127
</div>
125128
)}
126129
</div>
127130
{story.storyOriginal && (
128131
<div>
129132
<p className="text-xs text-body-medium">
130-
English translation
133+
{t("page-10-year-stories-english-translation")}
131134
</p>
132135
<Button
133136
onClick={() => handleFlip(index)}
@@ -139,7 +142,7 @@ const Stories = ({ stories }: StoriesProps) => {
139142
eventCategory: "10-year-anniversary",
140143
}}
141144
>
142-
Show original
145+
{t("page-10-year-stories-show-original")}
143146
</Button>
144147
</div>
145148
)}
@@ -198,14 +201,14 @@ const Stories = ({ stories }: StoriesProps) => {
198201
eventCategory: "10-year-anniversary",
199202
}}
200203
>
201-
Read more
204+
{t("page-10-year-stories-read-more")}
202205
</Button>
203206
</div>
204207
)}
205208
</div>
206209
<div>
207210
<p className="text-xs text-body-medium">
208-
Original language
211+
{t("page-10-year-stories-original-language")}
209212
</p>
210213
<Button
211214
onClick={() => handleFlip(index)}
@@ -217,7 +220,7 @@ const Stories = ({ stories }: StoriesProps) => {
217220
eventCategory: "10-year-anniversary",
218221
}}
219222
>
220-
Show English
223+
{t("page-10-year-stories-show-english")}
221224
</Button>
222225
</div>
223226
<p className="mt-2 text-sm text-body-medium">
@@ -246,7 +249,7 @@ const Stories = ({ stories }: StoriesProps) => {
246249
}}
247250
variant="outline"
248251
>
249-
Show more
252+
{t("page-10-year-stories-show-more")}
250253
</Button>
251254
</div>
252255
)}

‎app/[locale]/10years/_components/TenYearGlobe.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import countries from "./countries.json"
1313

1414
import { useBreakpointValue } from "@/hooks/useBreakpointValue"
1515
import { usePrefersReducedMotion } from "@/hooks/usePrefersReducedMotion"
16+
import { useTranslation } from "@/hooks/useTranslation"
1617
import EthLogo from "@/public/images/assets/eth-glyph-colored.png"
1718

1819
// Define a type for event data
@@ -40,6 +41,7 @@ interface ExtendedOrbitControls extends OrbitControls {
4041
}
4142

4243
const TenYearGlobe = ({ events }: { events: EventData[] }) => {
44+
const { t } = useTranslation("page-10-year-anniversary")
4345
const globeRef = useRef<GlobeMethods>()
4446
const globeContainerRef = useRef<HTMLDivElement>(null)
4547
const { resolvedTheme } = useTheme()
@@ -272,7 +274,7 @@ const TenYearGlobe = ({ events }: { events: EventData[] }) => {
272274
hideArrow
273275
className="no-underline"
274276
>
275-
Go to event
277+
{t("page-10-year-globe-go-to-event")}
276278
</Link>
277279
)}
278280
</div>

0 commit comments

Comments
 (0)