Skip to content

Commit 644f42d

Browse files
wackerowwackerow
authored
Merge pull request #13951 from ethereum/shadcn-wave
Shadcn migration - more components
2 parents 99c3c77 + a044f32 commit 644f42d

File tree

16 files changed

+60
-76
lines changed

16 files changed

+60
-76
lines changed

‎src/components/Banners/BugBountyBanner/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
// Libraries
22
import React from "react"
3-
import { Center, Text } from "@chakra-ui/react"
43

54
// Components
65
import BannerNotification from "@/components/Banners/BannerNotification"
6+
import { Center } from "@/components/ui/flex"
77

88
const BugBountyBanner = () => (
99
<BannerNotification shouldShow>
1010
<Center>
11-
<Text m={0} p={0}>
11+
<p>
1212
All Dencun-related bounties currently receive a 2x bonus multiplier (up
1313
to 500,000 USD) up to two weeks before the scheduled mainnet hardfork.
14-
</Text>
14+
</p>
1515
</Center>
1616
</BannerNotification>
1717
)

‎src/components/Banners/UpgradeBannerNotification.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
1-
import { Box } from "@chakra-ui/react"
2-
31
import Emoji from "../Emoji"
4-
import InlineLink from "../Link"
2+
import InlineLink from "../ui/Link"
53

64
import BannerNotification from "./BannerNotification"
75

86
const UpgradeBannerNotification = () => (
97
<BannerNotification shouldShow>
108
<Emoji text=":megaphone:" className="me-4 flex-shrink-0 text-2xl" />
11-
<Box>
9+
<div>
1210
<b>
1311
We&apos;ve deprecated our use of &apos;Eth1&apos; and &apos;Eth2&apos;
1412
terms.
1513
</b>{" "}
1614
<InlineLink href="https://blog.ethereum.org/2022/01/24/the-great-eth2-renaming/">
1715
Read the full announcement
1816
</InlineLink>
19-
</Box>
17+
</div>
2018
</BannerNotification>
2119
)
2220

‎src/components/CopyToClipboard.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
import { Box, useClipboard } from "@chakra-ui/react"
1+
import { cn } from "@/lib/utils/cn"
2+
3+
import { useClipboard } from "@/hooks/useClipboard"
24

35
export type CopyToClipboardProps = {
46
text: string
@@ -11,16 +13,15 @@ const CopyToClipboard = ({
1113
text,
1214
inline = false,
1315
}: CopyToClipboardProps) => {
14-
const { onCopy, hasCopied } = useClipboard(text, { timeout: 1500 })
16+
const { onCopy, hasCopied } = useClipboard({ timeout: 1500 })
1517

1618
return (
17-
<Box
18-
cursor="pointer"
19-
onClick={onCopy}
20-
display={inline ? "inline" : "block"}
19+
<div
20+
className={cn("cursor-pointer", inline ? "inline" : "block")}
21+
onClick={() => onCopy(text)}
2122
>
2223
{children(hasCopied)}
23-
</Box>
24+
</div>
2425
)
2526
}
2627

‎src/components/EnvWarningBanner.tsx

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import React from "react"
2-
import { FlexProps } from "@chakra-ui/react"
32

43
import InfoBanner from "./InfoBanner"
54
import Translation from "./Translation"
65

7-
const EnvWarningBanner = ({ ...flexProps }: FlexProps) => (
8-
<InfoBanner isWarning {...flexProps}>
6+
const EnvWarningBanner = () => (
7+
<InfoBanner isWarning>
98
<Translation id="page-tutorials-env-banner" />
109
</InfoBanner>
1110
)

‎src/components/EthVideo.tsx

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import { Box } from "@chakra-ui/react"
2-
import { useColorModeValue } from "@chakra-ui/react"
1+
import useColorModeValue from "@/hooks/useColorModeValue"
32

43
const EthVideo = () => {
54
const src = useColorModeValue(
@@ -8,7 +7,7 @@ const EthVideo = () => {
87
)
98

109
return (
11-
<Box>
10+
<div>
1211
<video
1312
id="hero-video"
1413
width="100%"
@@ -19,7 +18,7 @@ const EthVideo = () => {
1918
loop
2019
muted
2120
/>
22-
</Box>
21+
</div>
2322
)
2423
}
2524

‎src/components/FeaturedText/index.tsx

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,10 @@
1-
import { Box } from "@chakra-ui/react"
2-
31
import type { ChildOnlyProp } from "@/lib/types"
42

53
function FeaturedText({ children }: ChildOnlyProp) {
64
return (
7-
<Box
8-
ps={4}
9-
ms={-4}
10-
borderInlineStart="1px dotted"
11-
borderColor="primary.base"
12-
>
5+
<div className="-ms-4 border border-dashed border-primary ps-4">
136
{children}
14-
</Box>
7+
</div>
158
)
169
}
1710

‎src/components/Glossary/GlossaryDefinition/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const GlossaryDefinition = ({
3131
return (
3232
<Stack className="mb-8 items-stretch gap-4 text-start">
3333
<h4
34-
className={term ? "relative scroll-mt-28" : ""}
34+
className={term ? "group relative scroll-mt-28" : ""}
3535
{...(term ? { "data-group": true, id: term } : {})}
3636
>
3737
<IdAnchor id={term} />

‎src/components/IdAnchor.tsx

Lines changed: 6 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,17 @@
11
import { CiLink } from "react-icons/ci"
2-
import { Icon } from "@chakra-ui/react"
32

4-
import Link from "@/components/Link"
3+
import { BaseLink } from "@/components/ui/Link"
54

65
const IdAnchor = ({ id }: { id?: string }) => {
76
if (!id) return null
87
return (
9-
<Link
10-
href={"#" + id}
11-
position="absolute"
12-
insetInlineEnd="100%"
8+
<BaseLink
9+
className="absolute end-full flex h-full items-center opacity-0 transition-opacity duration-100 ease-in-out focus:opacity-100 group-hover:opacity-100"
1310
aria-label={id.replaceAll("-", " ") + " permalink"}
14-
opacity={0}
15-
_groupHover={{ opacity: 1 }}
16-
_focus={{ opacity: 1 }}
17-
transition="opacity 0.1s ease-in-out"
11+
href={"#" + id}
1812
>
19-
<Icon as={CiLink} fontSize="xl" me="1" />
20-
</Link>
13+
<CiLink className="me-1 text-xl" />
14+
</BaseLink>
2115
)
2216
}
2317

‎src/components/LearningToolsCardGrid.tsx

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from "react"
2-
import { Grid } from "@chakra-ui/react"
32

43
import { LearningToolsCardGridProps } from "@/lib/types"
54

@@ -8,11 +7,7 @@ import Translation from "./Translation"
87

98
const LearningToolsCardGrid = ({ category }: LearningToolsCardGridProps) => {
109
return (
11-
<Grid
12-
templateColumns="repeat(auto-fill, minmax(min(100%, 280px), 1fr))"
13-
gap={8}
14-
mb={8}
15-
>
10+
<div className="mb-8 grid grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))] gap-8">
1611
{category
1712
.sort(({ locales }) => (locales?.length ? -1 : 0))
1813
.map(({ name, description, background, url, alt, image, subjects }) => (
@@ -28,7 +23,7 @@ const LearningToolsCardGrid = ({ category }: LearningToolsCardGridProps) => {
2823
<Translation id={description} />
2924
</ProductCard>
3025
))}
31-
</Grid>
26+
</div>
3227
)
3328
}
3429

‎src/components/MarkdownImage.tsx

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11
import { extname } from "path"
22

3-
import { Flex } from "@chakra-ui/react"
4-
5-
import { Image, type ImageProps } from "@/components/Image"
6-
import Link from "@/components/Link"
3+
import { type ImageProps, TwImage } from "@/components/Image"
74

85
import { toPosixPath } from "@/lib/utils/relativePath"
96

107
import { CONTENT_IMAGES_MAX_WIDTH } from "@/lib/constants"
118

9+
import InlineLink from "./ui/Link"
10+
1211
interface MarkdownImageProps extends Omit<ImageProps, "width" | "height"> {
1312
width: string
1413
height: string
@@ -42,20 +41,25 @@ const MarkdownImage = ({
4241
return (
4342
// display the wrapper as a `span` to avoid dom nesting warnings as mdx
4443
// sometimes wraps images in `p` tags
45-
<Flex as="span" justify="center">
46-
<Link href={transformedSrc} target="_blank" rel="noopener" locale={false}>
47-
<Image
44+
<span className="flex justify-center">
45+
<InlineLink
46+
href={transformedSrc}
47+
target="_blank"
48+
rel="noopener"
49+
locale={false}
50+
>
51+
<TwImage
4852
alt={alt}
4953
width={imageWidth}
5054
height={imageHeight}
5155
loading="lazy"
5256
src={transformedSrc}
5357
unoptimized={isAnimated}
54-
h="auto"
58+
className="h-auto"
5559
{...rest}
5660
/>
57-
</Link>
58-
</Flex>
61+
</InlineLink>
62+
</span>
5963
)
6064
}
6165

0 commit comments

Comments
 (0)