Merge branch 'dev' into Shadcn_Migrate_eth.tsx

Author: pettinarip

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ethereum-org-website",
-  "version": "9.4.1",
+  "version": "9.4.2",
   "license": "MIT",
   "private": true,
   "scripts": {
@@ -36,6 +36,7 @@
     "@hookform/resolvers": "^3.8.0",
     "@next/bundle-analyzer": "^14.2.5",
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-avatar": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.1.1",
     "@radix-ui/react-compose-refs": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",

public/images/0xparc-logo.svg

@@ -1,40 +1,44 @@
 import { ReactNode } from "react"
-import { Heading, Stack, StackProps, Text } from "@chakra-ui/react"
 
 import Emoji from "@/components/Emoji"
 
-export type CardProps = Omit<StackProps, "children" | "title"> & {
+import { cn } from "@/lib/utils/cn"
+
+export type CardProps = {
   children?: ReactNode
   emoji?: string
   title?: ReactNode
   description?: ReactNode
+  className?: string
 }
 
-const Card = ({ emoji, title, description, children, ...props }: CardProps) => (
-  <Stack
-    spacing="4"
-    justifyContent="space-between"
-    bg="ednBackground"
-    borderRadius="sm"
-    border="1px"
-    borderStyle="solid"
-    borderColor="lightBorder"
-    p="6"
+const Card = ({
+  emoji,
+  title,
+  description,
+  children,
+  className,
+  ...props
+}: CardProps) => (
+  <div
+    className={cn(
+      "flex flex-col justify-between space-y-4",
+      "rounded-sm bg-background-highlight",
+      "border border-solid",
+      "p-6",
+      className
+    )}
     {...props}
   >
-    <Stack spacing="4">
+    <div className="flex flex-col space-y-4">
       {emoji && <Emoji className="text-5xl leading-none" text={emoji} />}
-      <Stack spacing="8">
-        {title && (
-          <Heading as="h3" fontSize="2xl">
-            {title}
-          </Heading>
-        )}
-        {description && <Text>{description}</Text>}
-      </Stack>
-    </Stack>
+      <div className="flex flex-col space-y-8">
+        {title && <h3 className="text-2xl leading-[1.4]">{title}</h3>}
+        {description && <p>{description}</p>}
+      </div>
+    </div>
     {children}
-  </Stack>
+  </div>
 )
 
 export default Card

src/components/Card/index.tsx

@@ -35,11 +35,11 @@ const Trilemma = () => {
             {t("page-roadmap-vision-trilemma-modal-tip")}:
           </p>
         </VStack>
-        <Card {...cardDetail} minH="300px" hideBelow="lg" mt="6" />
+        <Card {...cardDetail} className="mt-6 hidden min-h-[300px] lg:block" />
       </Stack>
       <Sheet open={mobileModalOpen} onOpenChange={handleModalClose}>
         <SheetContent side="bottom" className="rounded-t-[16px]">
-          <Card {...cardDetail} background="none" border="none" my="8" />
+          <Card {...cardDetail} className="my-8 border-none bg-transparent" />
           <SheetClose className="absolute right-3 top-5">
             <span className="sr-only">Close</span>
             <svg

src/components/Trilemma/index.tsx

@@ -1,8 +1,7 @@
-import * as React from "react"
-import { AvatarGroup, HStack, VStack } from "@chakra-ui/react"
-import { Meta, StoryObj } from "@storybook/react"
+import type { Meta, StoryObj } from "@storybook/react"
 
-import Avatar from "."
+import { Avatar, AvatarGroup } from "../avatar"
+import { HStack, VStack } from "../flex"
 
 const meta = {
   title: "Atoms / Media & Icons / Avatars",
@@ -15,13 +14,13 @@ type Story = StoryObj<typeof meta>
 
 export const Single: Story = {
   args: {
-    name: "Dan Abrahmov",
+    name: "dan abrahmov",
     src: "https://bit.ly/dan-abramov",
     href: "#",
   },
   render: (args) => (
-    <VStack spacing={4}>
-      {["lg", "md", "sm", "xs"].map((size) => (
+    <VStack className="gap-4">
+      {(["lg", "md", "sm", "xs"] as const).map((size) => (
         <Avatar key={size} size={size} {...args} />
       ))}
     </VStack>
@@ -35,12 +34,12 @@ export const Group: Story = {
     href: "#",
   },
   render: (args) => (
-    <VStack spacing={4}>
-      {["sm", "xs"].map((size) => (
+    <VStack className="gap-4">
+      {(["sm", "xs"] as const).map((size) => (
         <AvatarGroup key={size} size={size} max={3}>
-          <Avatar {...args} />
-          <Avatar {...args} />
-          <Avatar {...args} />
+          <Avatar dataTest="one" {...args} />
+          <Avatar dataTest="two" {...args} />
+          <Avatar dataTest="three" {...args} />
           <Avatar {...args} />
         </AvatarGroup>
       ))}
@@ -51,19 +50,19 @@ export const Group: Story = {
 export const WithUsername: Story = {
   args: {
     name: "Dan Abrahmov",
-    src: "https://bit.ly/dan-abramov",
-    href: "#",
+    src: "http://bit.ly/dan-abramov",
+    href: "http://bit.ly/dan-abramov",
     label: "daneabrahmov",
   },
   render: (args) => (
-    <HStack spacing={16}>
+    <HStack className="gap-4">
       <VStack>
-        {["md", "sm"].map((size, idx) => (
+        {(["md", "sm", "xs"] as const).map((size, idx) => (
           <Avatar key={idx} size={size} {...args} />
         ))}
       </VStack>
       <VStack>
-        {["md", "sm"].map((size, idx) => (
+        {(["md", "sm", "xs"] as const).map((size, idx) => (
           <Avatar key={idx} size={size} direction="column" {...args} />
         ))}
       </VStack>