Skip to content

Commit e2fd1d5

Browse files
pettinarippettinarip
authored
Merge pull request #14701 from JoeChenJ/Migrate_learn_page_to_Shadcn
Shadcn Migrate: Migrate learn page to shadcn
2 parents d732317 + 0b960b7 commit e2fd1d5

File tree

1 file changed

+25
-33
lines changed

1 file changed

+25
-33
lines changed

‎src/pages/learn.tsx

Lines changed: 25 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import DocLink from "@/components/DocLink"
1212
import FeedbackCard from "@/components/FeedbackCard"
1313
import { HubHero } from "@/components/Hero"
1414
import type { HubHeroProps } from "@/components/Hero/HubHero"
15-
import { Image, type ImageProps } from "@/components/Image"
15+
import { type ImageProps, TwImage } from "@/components/Image"
1616
import LeftNavBar from "@/components/LeftNavBar"
1717
import MainArticle from "@/components/MainArticle"
1818
import { ContentContainer } from "@/components/MdComponents"
@@ -121,6 +121,10 @@ const H3 = ({ children, ...props }: HTMLAttributes<HTMLHeadingElement>) => (
121121
</h3>
122122
)
123123

124+
const ImageHeight200 = ({ src, alt }: ImageProps) => (
125+
<TwImage className="h-[200px] w-auto" src={src} alt={alt} />
126+
)
127+
124128
export const getStaticProps = (async ({ locale }) => {
125129
const requiredNamespaces = getRequiredNamespacesForPage("/learn")
126130

@@ -197,11 +201,6 @@ const LearnPage = () => {
197201
],
198202
}
199203

200-
const height200: Partial<ImageProps> = {
201-
height: 200,
202-
style: { width: "auto", objectFit: "cover" },
203-
}
204-
205204
return (
206205
<div className="relative w-full">
207206
<PageMetadata
@@ -236,10 +235,9 @@ const LearnPage = () => {
236235
>
237236
<>
238237
<CardImage>
239-
<Image
238+
<ImageHeight200
240239
src={whatIsEth}
241240
alt={t("what-is-ethereum-card-image-alt")}
242-
{...height200}
243241
/>
244242
</CardImage>
245243
<ButtonLink href="/what-is-ethereum/">
@@ -253,7 +251,7 @@ const LearnPage = () => {
253251
>
254252
<>
255253
<CardImage>
256-
<Image src={eth} alt="" {...height200} />
254+
<ImageHeight200 src={eth} alt="" />
257255
</CardImage>
258256
<ButtonLink href="/eth/">
259257
{t("what-is-eth-card-title")}
@@ -266,7 +264,7 @@ const LearnPage = () => {
266264
>
267265
<>
268266
<CardImage>
269-
<Image src={impact} alt="" {...height200} />
267+
<ImageHeight200 src={impact} alt="" />
270268
</CardImage>
271269
<ButtonLink href="/web3/">
272270
{t("what-is-web3-card-title")}
@@ -305,10 +303,9 @@ const LearnPage = () => {
305303
>
306304
<>
307305
<CardImage>
308-
<Image
306+
<ImageHeight200
309307
src={wallet}
310308
alt={t("what-is-a-wallet-card-alt")}
311-
{...height200}
312309
/>
313310
</CardImage>
314311
<ButtonLink href="/wallets/">
@@ -322,7 +319,7 @@ const LearnPage = () => {
322319
>
323320
<>
324321
<CardImage>
325-
<Image src={futureTransparent} alt="" {...height200} />
322+
<ImageHeight200 src={futureTransparent} alt="" />
326323
</CardImage>
327324
<ButtonLink href="/wallets/find-wallet/">
328325
{t("find-a-wallet-button")}
@@ -335,7 +332,7 @@ const LearnPage = () => {
335332
>
336333
<>
337334
<CardImage>
338-
<Image src={Layer2LearnHero} alt="" {...height200} />
335+
<ImageHeight200 src={Layer2LearnHero} alt="" />
339336
</CardImage>
340337
<ButtonLink href="/layer-2/networks">
341338
{t("ethereum-networks-card-button")}
@@ -359,7 +356,7 @@ const LearnPage = () => {
359356
</UnorderedList>
360357
</Stack>
361358
<div className="self-end">
362-
<Image src={newRings} alt="" maxW={265} />
359+
<TwImage className="max-w-[265px]" src={newRings} alt="" />
363360
</div>
364361
</Flex>
365362

@@ -394,7 +391,7 @@ const LearnPage = () => {
394391
>
395392
<>
396393
<CardImage>
397-
<Image src={financeTransparent} alt="" {...height200} />
394+
<ImageHeight200 src={financeTransparent} alt="" />
398395
</CardImage>
399396
<ButtonLink href="/defi/">
400397
{t("defi-card-button")}
@@ -407,7 +404,7 @@ const LearnPage = () => {
407404
>
408405
<>
409406
<CardImage>
410-
<Image src={stablecoins} alt="" {...height200} />
407+
<ImageHeight200 src={stablecoins} alt="" />
411408
</CardImage>
412409
<ButtonLink href="/stablecoins/">
413410
{t("stablecoins-card-button")}
@@ -420,11 +417,7 @@ const LearnPage = () => {
420417
>
421418
<>
422419
<CardImage>
423-
<Image
424-
src={infrastructureTransparent}
425-
alt=""
426-
{...height200}
427-
/>
420+
<ImageHeight200 src={infrastructureTransparent} alt="" />
428421
</CardImage>
429422
<ButtonLink href="/nft/">{t("nft-card-button")}</ButtonLink>
430423
</>
@@ -435,7 +428,7 @@ const LearnPage = () => {
435428
>
436429
<>
437430
<CardImage>
438-
<Image src={dao} alt="" {...height200} />
431+
<ImageHeight200 src={dao} alt="" />
439432
</CardImage>
440433
<ButtonLink href="/dao/">{t("dao-card-button")}</ButtonLink>
441434
</>
@@ -446,7 +439,7 @@ const LearnPage = () => {
446439
>
447440
<>
448441
<CardImage>
449-
<Image src={developersEthBlocks} alt="" {...height200} />
442+
<ImageHeight200 src={developersEthBlocks} alt="" />
450443
</CardImage>
451444
<ButtonLink href="/dapps/">
452445
{t("dapp-card-button")}
@@ -509,7 +502,7 @@ const LearnPage = () => {
509502
>
510503
<>
511504
<CardImage>
512-
<Image src={rhino} alt="" {...height200} />
505+
<ImageHeight200 src={rhino} alt="" />
513506
</CardImage>
514507
<ButtonLink href="/staking/">
515508
{t("staking-ethereum-card-button")}
@@ -522,7 +515,7 @@ const LearnPage = () => {
522515
>
523516
<>
524517
<CardImage>
525-
<Image src={ethereumInside} alt="" {...height200} />
518+
<ImageHeight200 src={ethereumInside} alt="" />
526519
</CardImage>
527520
<ButtonLink href="/run-a-node/">
528521
{t("run-a-node-card-title")}
@@ -544,7 +537,7 @@ const LearnPage = () => {
544537
>
545538
<>
546539
<CardImage>
547-
<Image src={hackathon} alt="" {...height200} />
540+
<ImageHeight200 src={hackathon} alt="" />
548541
</CardImage>
549542
<ButtonLink href="/energy-consumption/">
550543
{t("energy-consumption-card-button")}
@@ -557,7 +550,7 @@ const LearnPage = () => {
557550
>
558551
<>
559552
<CardImage>
560-
<Image src={merge} alt="" {...height200} />
553+
<ImageHeight200 src={merge} alt="" />
561554
</CardImage>
562555
<ButtonLink href="/roadmap/">
563556
{t("ethereum-upgrades-card-button")}
@@ -570,7 +563,7 @@ const LearnPage = () => {
570563
>
571564
<>
572565
<CardImage>
573-
<Image src={financeTransparent} alt="" {...height200} />
566+
<ImageHeight200 src={financeTransparent} alt="" />
574567
</CardImage>
575568
<ButtonLink href="/whitepaper/">
576569
{t("ethereum-whitepaper-card-button")}
@@ -616,10 +609,9 @@ const LearnPage = () => {
616609
>
617610
<>
618611
<CardImage>
619-
<Image
612+
<ImageHeight200
620613
src={enterprise}
621614
alt={t("community-hub-card-alt")}
622-
{...height200}
623615
/>
624616
</CardImage>
625617
<ButtonLink href="/community/">
@@ -633,7 +625,7 @@ const LearnPage = () => {
633625
>
634626
<>
635627
<CardImage>
636-
<Image src={dogeComputer} alt="" {...height200} />
628+
<ImageHeight200 src={dogeComputer} alt="" />
637629
</CardImage>
638630
<ButtonLink href="/community/get-involved/">
639631
{t("get-involved-card-title")}
@@ -646,7 +638,7 @@ const LearnPage = () => {
646638
>
647639
<>
648640
<CardImage>
649-
<Image src={impact} alt="" {...height200} />
641+
<ImageHeight200 src={impact} alt="" />
650642
</CardImage>
651643
<ButtonLink href="/community/online/">
652644
{t("online-communities-card-button")}

0 commit comments

Comments
 (0)