Skip to content

Commit 242f68e

Browse files
wackerowwackerow
committed
refactor: separate CalloutSSR from Callout
SSR expects final string values for title and description; Callout remains as-named for better backward compatibility, and expects a translation key for title and description to look up the final string client-side, passing that to the SSR version for canonical styling.
1 parent c1ab8c1 commit 242f68e

File tree

5 files changed

+95
-94
lines changed

5 files changed

+95
-94
lines changed

‎app/[locale]/layer-2/_components/layer-2.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import type { GrowThePieData, Lang } from "@/lib/types"
44

5-
import Callout from "@/components/Callout"
5+
import CalloutSSR from "@/components/CalloutSSR"
66
import Card from "@/components/Card"
77
import ExpandableCard from "@/components/ExpandableCard"
88
import HubHero, { HubHeroProps } from "@/components/Hero/HubHero"
@@ -465,7 +465,7 @@ const Layer2Hub = ({
465465
id="layer-2-callout-cards"
466466
className="flex w-full flex-col px-8 py-8 md:flex-row"
467467
>
468-
<Callout
468+
<CalloutSSR
469469
image={ExploreImage}
470470
title={t("page-layer-2-callout-1-title")}
471471
description={t("page-layer-2-callout-1-description")}
@@ -482,8 +482,8 @@ const Layer2Hub = ({
482482
{t("common:nav-networks-explore-networks-label")}
483483
</ButtonLink>
484484
</div>
485-
</Callout>
486-
<Callout
485+
</CalloutSSR>
486+
<CalloutSSR
487487
image={WalkingImage}
488488
title={t("page-layer-2-callout-2-title")}
489489
description={t("page-layer-2-callout-2-description")}
@@ -501,7 +501,7 @@ const Layer2Hub = ({
501501
{t("common:learn-more")}
502502
</ButtonLink>
503503
</div>
504-
</Callout>
504+
</CalloutSSR>
505505
</div>
506506
</MainArticle>
507507
)

‎app/[locale]/layer-2/learn/_components/learn.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
import { PageWithContributorsProps } from "@/lib/types"
44

5-
import Callout from "@/components/Callout"
5+
import CalloutSSR from "@/components/CalloutSSR"
66
import Card from "@/components/Card"
77
import FileContributors from "@/components/FileContributors"
88
import { ContentHero, type ContentHeroProps } from "@/components/Hero"
@@ -289,7 +289,7 @@ const Layer2Learn = ({
289289

290290
<div id="callout-cards" className="px-8 py-9">
291291
<div className="flex w-full flex-col lg:flex-row">
292-
<Callout
292+
<CalloutSSR
293293
image={Callout1Image}
294294
title={t("page-layer-2-learn-callout-1-title")}
295295
description={t("page-layer-2-learn-callout-1-description")}
@@ -306,8 +306,8 @@ const Layer2Learn = ({
306306
{t("page-layer-2-learn-learn-more")}
307307
</ButtonLink>
308308
</div>
309-
</Callout>
310-
<Callout
309+
</CalloutSSR>
310+
<CalloutSSR
311311
image={Callout2Image}
312312
title={t("page-layer-2-learn-callout-2-title")}
313313
description={t("page-layer-2-learn-callout-2-description")}
@@ -324,7 +324,7 @@ const Layer2Learn = ({
324324
{t("page-layer-2-learn-explore-networks")}
325325
</ButtonLink>
326326
</div>
327-
</Callout>
327+
</CalloutSSR>
328328
</div>
329329
</div>
330330

‎app/[locale]/layer-2/networks/_components/networks.tsx

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

3-
import Callout from "@/components/Callout"
3+
import CalloutSSR from "@/components/CalloutSSR"
44
import { ContentHero, ContentHeroProps } from "@/components/Hero"
55
import Layer2NetworksTable from "@/components/Layer2NetworksTable"
66
import MainArticle from "@/components/MainArticle"
@@ -63,7 +63,7 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
6363
id="callout-cards"
6464
className="flex w-full flex-col px-8 py-9 lg:flex-row lg:gap-16"
6565
>
66-
<Callout
66+
<CalloutSSR
6767
image={Callout1Image}
6868
title={t("page-layer-2-networks-callout-1-title")}
6969
description={t("page-layer-2-networks-callout-1-description")}
@@ -80,8 +80,8 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
8080
{t("common:learn-more")}
8181
</ButtonLink>
8282
</div>
83-
</Callout>
84-
<Callout
83+
</CalloutSSR>
84+
<CalloutSSR
8585
image={Callout2Image}
8686
title={t("page-layer-2-networks-callout-2-title")}
8787
description={t("page-layer-2-networks-callout-2-description")}
@@ -98,7 +98,7 @@ const Layer2Networks = ({ layer2Data, locale, mainnetData }) => {
9898
{t("common:learn-more")}
9999
</ButtonLink>
100100
</div>
101-
</Callout>
101+
</CalloutSSR>
102102
</div>
103103
</MainArticle>
104104
)

‎src/components/Callout.tsx

Lines changed: 9 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,23 @@
1-
import type { TranslationKey } from "@/lib/types"
1+
"use client"
22

3-
import Emoji from "@/components/Emoji"
4-
import { Image, type ImageProps } from "@/components/Image"
3+
import type { TranslationKey } from "@/lib/types"
54

6-
import { cn } from "@/lib/utils/cn"
5+
import CalloutSSR, { CalloutBaseProps } from "./CalloutSSR"
76

87
import { useTranslation } from "@/hooks/useTranslation"
98

10-
export type CalloutProps = {
11-
children?: React.ReactNode
12-
image?: ImageProps["src"]
13-
emoji?: string
14-
alt?: string
9+
export type CalloutProps = CalloutBaseProps & {
1510
titleKey?: TranslationKey
1611
descriptionKey?: TranslationKey
17-
title?: string
18-
description?: string
19-
className?: string
20-
headerClassName?: string
2112
}
2213

23-
const Callout = ({
24-
image,
25-
emoji,
26-
alt,
27-
titleKey,
28-
descriptionKey,
29-
title,
30-
description,
31-
children,
32-
className,
33-
headerClassName,
34-
}: CalloutProps) => {
14+
const Callout = ({ titleKey, descriptionKey, ...props }: CalloutProps) => {
3515
const { t } = useTranslation("common")
3616

37-
return (
38-
<aside
39-
className={cn(
40-
"m-4 mb-16 mt-32 flex flex-1 flex-col rounded bg-gradient-to-br from-[rgba(127,127,213,0.2)] via-[rgba(134,168,231,0.2)] to-[rgba(145,234,228,0.2)] p-6 sm:p-12 lg:mb-4",
41-
className
42-
)}
43-
>
44-
{image && (
45-
<div className="-mt-40 self-center">
46-
<Image
47-
src={image}
48-
alt={alt || ""}
49-
className="max-h-[263px] min-h-[200px] max-w-[263px] object-contain"
50-
/>
51-
</div>
52-
)}
53-
<div className="flex h-full flex-col justify-between">
54-
<div>
55-
{emoji && <Emoji text={emoji} className="text-5xl" />}
56-
{titleKey && (
57-
<h3
58-
className={cn(
59-
"mb-8 mt-10 text-2xl leading-[1.4]",
60-
headerClassName
61-
)}
62-
>
63-
{t(titleKey)}
64-
</h3>
65-
)}
66-
{title && (
67-
<h3
68-
className={cn(
69-
"mb-8 mt-10 text-2xl leading-[1.4]",
70-
headerClassName
71-
)}
72-
>
73-
{title}
74-
</h3>
75-
)}
76-
{descriptionKey && (
77-
<p className="mb-6 text-xl leading-[140%] text-body-medium">
78-
{t(descriptionKey)}
79-
</p>
80-
)}
81-
{description && (
82-
<p className="mb-6 text-xl leading-[140%] text-body-medium">
83-
{description}
84-
</p>
85-
)}
86-
</div>
87-
{children}
88-
</div>
89-
</aside>
90-
)
17+
const title = titleKey ? t(titleKey) : undefined
18+
const description = descriptionKey ? t(descriptionKey) : undefined
19+
20+
return <CalloutSSR {...props} title={title} description={description} />
9121
}
9222

9323
export default Callout

‎src/components/CalloutSSR.tsx

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import Emoji from "@/components/Emoji"
2+
import { Image, type ImageProps } from "@/components/Image"
3+
4+
import { cn } from "@/lib/utils/cn"
5+
6+
export type CalloutBaseProps = {
7+
children?: React.ReactNode
8+
image?: ImageProps["src"]
9+
emoji?: string
10+
alt?: string
11+
className?: string
12+
headerClassName?: string
13+
}
14+
15+
type CalloutSSRProps = CalloutBaseProps & {
16+
title?: string
17+
description?: string
18+
}
19+
20+
const CalloutSSR = ({
21+
image,
22+
emoji,
23+
alt,
24+
title,
25+
description,
26+
children,
27+
className,
28+
headerClassName,
29+
}: CalloutSSRProps) => {
30+
return (
31+
<aside
32+
className={cn(
33+
"m-4 mb-16 mt-32 flex flex-1 flex-col rounded bg-gradient-to-br from-[rgba(127,127,213,0.2)] via-[rgba(134,168,231,0.2)] to-[rgba(145,234,228,0.2)] p-6 sm:p-12 lg:mb-4",
34+
className
35+
)}
36+
>
37+
{image && (
38+
<div className="-mt-40 self-center">
39+
<Image
40+
src={image}
41+
alt={alt || ""}
42+
className="max-h-[263px] min-h-[200px] max-w-[263px] object-contain"
43+
/>
44+
</div>
45+
)}
46+
<div className="flex h-full flex-col justify-between">
47+
<div>
48+
{emoji && <Emoji text={emoji} className="text-5xl" />}
49+
{title && (
50+
<h3
51+
className={cn(
52+
"mb-8 mt-10 text-2xl leading-[1.4]",
53+
headerClassName
54+
)}
55+
>
56+
{title}
57+
</h3>
58+
)}
59+
{description && (
60+
<p className="mb-6 text-xl leading-[140%] text-body-medium">
61+
{description}
62+
</p>
63+
)}
64+
</div>
65+
{children}
66+
</div>
67+
</aside>
68+
)
69+
}
70+
71+
export default CalloutSSR

0 commit comments

Comments
 (0)