Skip to content

Commit 1bb48e7

Browse files
BaystefBaystef
committed
Merge remote-tracking branch 'upstream/dev' into migrate/community
2 parents a7a9829 + 2f63ede commit 1bb48e7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+1831
-2114
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ethereum-org-website",
3-
"version": "9.4.1",
3+
"version": "9.4.2",
44
"license": "MIT",
55
"private": true,
66
"scripts": {
@@ -36,6 +36,7 @@
3636
"@hookform/resolvers": "^3.8.0",
3737
"@next/bundle-analyzer": "^14.2.5",
3838
"@radix-ui/react-accordion": "^1.2.0",
39+
"@radix-ui/react-avatar": "^1.1.2",
3940
"@radix-ui/react-checkbox": "^1.1.1",
4041
"@radix-ui/react-compose-refs": "^1.1.0",
4142
"@radix-ui/react-dialog": "^1.1.1",

‎public/images/0xparc-logo.svg

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/Card/index.tsx

Lines changed: 27 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,44 @@
11
import { ReactNode } from "react"
2-
import { Heading, Stack, StackProps, Text } from "@chakra-ui/react"
32

43
import Emoji from "@/components/Emoji"
54

6-
export type CardProps = Omit<StackProps, "children" | "title"> & {
5+
import { cn } from "@/lib/utils/cn"
6+
7+
export type CardProps = {
78
children?: ReactNode
89
emoji?: string
910
title?: ReactNode
1011
description?: ReactNode
12+
className?: string
1113
}
1214

13-
const Card = ({ emoji, title, description, children, ...props }: CardProps) => (
14-
<Stack
15-
spacing="4"
16-
justifyContent="space-between"
17-
bg="ednBackground"
18-
borderRadius="sm"
19-
border="1px"
20-
borderStyle="solid"
21-
borderColor="lightBorder"
22-
p="6"
15+
const Card = ({
16+
emoji,
17+
title,
18+
description,
19+
children,
20+
className,
21+
...props
22+
}: CardProps) => (
23+
<div
24+
className={cn(
25+
"flex flex-col justify-between space-y-4",
26+
"rounded-sm bg-background-highlight",
27+
"border border-solid",
28+
"p-6",
29+
className
30+
)}
2331
{...props}
2432
>
25-
<Stack spacing="4">
33+
<div className="flex flex-col space-y-4">
2634
{emoji && <Emoji className="text-5xl leading-none" text={emoji} />}
27-
<Stack spacing="8">
28-
{title && (
29-
<Heading as="h3" fontSize="2xl">
30-
{title}
31-
</Heading>
32-
)}
33-
{description && <Text>{description}</Text>}
34-
</Stack>
35-
</Stack>
35+
<div className="flex flex-col space-y-8">
36+
{title && <h3 className="text-2xl leading-[1.4]">{title}</h3>}
37+
{description && <p>{description}</p>}
38+
</div>
39+
</div>
3640
{children}
37-
</Stack>
41+
</div>
3842
)
3943

4044
export default Card

‎src/components/CardList.tsx

Lines changed: 51 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,17 @@
1-
import Image, { type ImageProps } from "next/image"
1+
import TwImage, { type ImageProps } from "next/image"
22
import type { ReactNode } from "react"
3-
import {
4-
Box,
5-
type BoxProps,
6-
Flex,
7-
HStack,
8-
LinkBox,
9-
LinkOverlay,
10-
type StackProps,
11-
useColorModeValue,
12-
} from "@chakra-ui/react"
133

14-
import { BaseLink } from "@/components/Link"
4+
import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
155

6+
import { cn } from "@/lib/utils/cn"
167
import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
178
import * as url from "@/lib/utils/url"
189

10+
import { BaseLink } from "./ui/Link"
11+
1912
import { useRtlFlip } from "@/hooks/useRtlFlip"
2013

21-
export type CardListItem = {
14+
export type CardProps = {
2215
title?: ReactNode
2316
description?: ReactNode
2417
caption?: ReactNode
@@ -27,93 +20,77 @@ export type CardListItem = {
2720
image?: ImageProps["src"]
2821
imageWidth?: number
2922
alt?: string
23+
className?: string
24+
onClick?: () => void
3025
}
3126

32-
const CardContainer = (props: StackProps) => (
33-
<HStack
34-
spacing={4}
35-
p={4}
36-
color="text"
37-
border="1px solid"
38-
borderColor="border"
39-
_hover={{
40-
borderRadius: "base",
41-
boxShadow: "0 0 1px var(--eth-colors-primary)",
42-
background: "tableBackgroundHover",
43-
}}
44-
{...props}
45-
/>
46-
)
47-
48-
type CardProps = CardListItem & Omit<StackProps, "title" | "id">
49-
5027
const Card = ({
5128
title,
5229
description,
5330
caption,
5431
link,
5532
image,
56-
imageWidth = 20, // Set 20px as default image width, can be overridden if needed
33+
className,
5734
alt,
35+
onClick,
36+
imageWidth = 20,
5837
...props
5938
}: CardProps) => {
60-
const { flipForRtl } = useRtlFlip()
39+
const { twFlipForRtl } = useRtlFlip()
6140
const isLink = !!link
6241
const isExternal = url.isExternal(link || "")
6342

64-
const descriptionColor = useColorModeValue("gray.500", "gray.400")
65-
6643
return (
67-
<CardContainer {...props}>
68-
{image && <Image src={image} alt={alt ?? ""} width={imageWidth} />}
69-
<Flex flex="1 1 75%" direction="column">
44+
<div
45+
className={cn(
46+
"text-text flex flex-row items-center gap-4 border p-4",
47+
"transition-all duration-200",
48+
"hover:bg-background-highlight",
49+
className
50+
)}
51+
onClick={onClick}
52+
{...props}
53+
>
54+
{image && <TwImage src={image} alt={alt ?? ""} width={imageWidth} />}
55+
<div className="flex flex-1 basis-3/4 flex-col">
7056
{isLink ? (
71-
<LinkOverlay
72-
as={BaseLink}
73-
href={link}
74-
isExternal={isExternal}
75-
hideArrow
76-
color="text"
77-
textDecoration="none"
78-
_hover={{ textDecoration: "none" }}
79-
>
80-
{title}
57+
<LinkOverlay asChild>
58+
<BaseLink href={link} hideArrow className="text-body no-underline">
59+
{title}
60+
</BaseLink>
8161
</LinkOverlay>
8262
) : (
83-
<Box>{title}</Box>
63+
<div>{title}</div>
8464
)}
8565

86-
<Box fontSize="sm" mb={0} color={descriptionColor}>
87-
{description}
88-
</Box>
89-
</Flex>
66+
<div className="mb-0 text-sm text-body-medium">{description}</div>
67+
</div>
9068
{caption && (
91-
<Flex flex="1 0 25%" align="center" wrap="wrap" me={4}>
92-
<Box fontSize="sm" mb={0} opacity={0.6}>
93-
{caption}
94-
</Box>
95-
</Flex>
69+
<div className="me-4 flex flex-[1_0_25%] flex-wrap items-center">
70+
<div className="mb-0 text-sm opacity-60">{caption}</div>
71+
</div>
9672
)}
97-
{isExternal && <Box transform={flipForRtl}>↗</Box>}
98-
</CardContainer>
73+
{isExternal && <span className={twFlipForRtl}>↗</span>}
74+
</div>
9975
)
10076
}
10177

102-
export type CardListProps = BoxProps & {
78+
export type CardListProps = {
10379
items: CardProps[]
10480
imageWidth?: number
10581
clickHandler?: (idx: string | number) => void
10682
customEventOptions?: MatomoEventOptions
83+
className?: string
10784
}
10885

10986
const CardList = ({
11087
items,
11188
imageWidth,
11289
clickHandler = () => null,
11390
customEventOptions,
114-
...props
91+
className,
11592
}: CardListProps) => (
116-
<Box bg="background.base" w="full" {...props}>
93+
<div className={cn("w-full bg-background", className)}>
11794
{items.map((listItem, idx) => {
11895
const { link, id } = listItem
11996
const isLink = !!link
@@ -123,18 +100,19 @@ const CardList = ({
123100
<Card {...listItem} imageWidth={imageWidth} />
124101
</LinkBox>
125102
) : (
126-
<Card
127-
key={idx}
128-
onClick={() => {
129-
customEventOptions && trackCustomEvent(customEventOptions)
130-
clickHandler(idx)
131-
}}
132-
mb={4}
133-
{...listItem}
134-
/>
103+
<div key={idx}>
104+
<Card
105+
onClick={() => {
106+
customEventOptions && trackCustomEvent(customEventOptions)
107+
clickHandler(idx)
108+
}}
109+
className="mb-4"
110+
{...listItem}
111+
/>
112+
</div>
135113
)
136114
})}
137-
</Box>
115+
</div>
138116
)
139117

140118
export default CardList

‎src/components/MergeArticleList.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { useTranslation } from "next-i18next"
22

3-
import CardList, { type CardListItem } from "@/components/CardList"
3+
import CardList, { type CardProps } from "@/components/CardList"
44

55
const MergeArticleList = () => {
66
const { t } = useTranslation(["page-upgrades", "page-upgrades-index"])
77

8-
const reads: CardListItem[] = [
8+
const reads: CardProps[] = [
99
{
1010
title: t("page-upgrades-index:page-upgrade-article-title-ethmerge"),
1111
description: t(

‎src/components/Simulator/ClickAnimation.tsx

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,26 @@
1-
import React, { useEffect, useState } from "react"
1+
import { type ReactNode, useEffect, useState } from "react"
22
import { motion, type Transition } from "framer-motion"
3-
import { createIcon, Flex, Text, TextProps } from "@chakra-ui/react"
3+
4+
import { cn } from "@/lib/utils/cn"
5+
6+
import { createIconBase } from "../icons/icon-base"
7+
import { Flex } from "../ui/flex"
48

59
const MotionFlex = motion(Flex)
610

711
const DownArrowLong = motion(
8-
createIcon({
12+
createIconBase({
913
displayName: "DownArrowLong",
1014
viewBox: "0 0 8 24",
11-
defaultProps: { fill: "currentColor" },
12-
path: (
15+
className: "fill-current",
16+
children: (
1317
<path d="M3.64645 23.3536C3.84171 23.5488 4.15829 23.5488 4.35355 23.3536L7.53553 20.1716C7.7308 19.9763 7.7308 19.6597 7.53553 19.4645C7.34027 19.2692 7.02369 19.2692 6.82843 19.4645L4 22.2929L1.17157 19.4645C0.976312 19.2692 0.659729 19.2692 0.464467 19.4645C0.269205 19.6597 0.269205 19.9763 0.464467 20.1716L3.64645 23.3536ZM3.5 2.18557e-08L3.5 23L4.5 23L4.5 -2.18557e-08L3.5 2.18557e-08Z" />
1418
),
1519
})
1620
)
1721

18-
type ClickAnimationProps = Pick<TextProps, "children"> & {
22+
type ClickAnimationProps = {
23+
children: ReactNode
1924
below?: boolean
2025
delay?: number
2126
}
@@ -34,33 +39,28 @@ export const ClickAnimation = ({
3439
times: [0, 0.25, 0.5],
3540
repeat: Infinity,
3641
}
37-
const top = below ? "calc(100% + 0.5rem)" : "auto"
38-
const bottom = below ? "auto" : "calc(100% + 1rem)"
42+
const topClass = below ? "top-[calc(100%_+_0.5rem)]" : "top-auto"
43+
const bottomClass = below ? "bottom-auto" : "bottom-[calc(100%_+_1rem)]"
3944
const y = below ? [0, 20, 0] : [0, -20, 0]
40-
const direction = below ? "column-reverse" : "column"
41-
const transformOrigin = below ? { bottom: 0 } : { top: 0 }
45+
const directionClass = below ? "flex-col-reverse" : "flex-col"
4246
const rotate = below ? 180 : 0
4347
return visible ? (
4448
<MotionFlex
49+
className={cn(
50+
"absolute inset-x-0 justify-center text-primary",
51+
topClass,
52+
bottomClass
53+
)}
4554
animate={{ opacity: [0, 1] }} // Fade in once
46-
position="absolute"
47-
top={top}
48-
justify="center"
49-
bottom={bottom}
50-
insetInline={0}
51-
color="primary.base"
55+
data-testid="click-animation-el"
5256
>
5357
<MotionFlex
54-
direction={direction}
55-
alignItems="center"
58+
className={cn("items-center", directionClass)}
5659
animate={{ y }} // Slide up and down
5760
transition={transition}
5861
>
59-
<Text fontSize="xs" fontStyle="italic" textTransform="lowercase" m={0}>
60-
{children}
61-
</Text>
62+
<p className="m-0 text-xs lowercase italic">{children}</p>
6263
<DownArrowLong
63-
transformOrigin={transformOrigin}
6464
initial={{ scaleY: 1, rotate }}
6565
animate={{ scaleY: [1, 1.25, 1] }} // Arrow scales up and down
6666
transition={transition}

0 commit comments

Comments
 (0)