Merge pull request #14684 from ethereum/cardlist-shadcn

feat: migrate CardList to tailwind

Author: pettinarip

src/components/CardList.tsx

@@ -1,24 +1,17 @@
-import Image, { type ImageProps } from "next/image"
+import TwImage, { type ImageProps } from "next/image"
 import type { ReactNode } from "react"
-import {
-  Box,
-  type BoxProps,
-  Flex,
-  HStack,
-  LinkBox,
-  LinkOverlay,
-  type StackProps,
-  useColorModeValue,
-} from "@chakra-ui/react"
 
-import { BaseLink } from "@/components/Link"
+import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 
+import { cn } from "@/lib/utils/cn"
 import { MatomoEventOptions, trackCustomEvent } from "@/lib/utils/matomo"
 import * as url from "@/lib/utils/url"
 
+import { BaseLink } from "./ui/Link"
+
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
-export type CardListItem = {
+export type CardProps = {
   title?: ReactNode
   description?: ReactNode
   caption?: ReactNode
@@ -27,93 +20,77 @@ export type CardListItem = {
   image?: ImageProps["src"]
   imageWidth?: number
   alt?: string
+  className?: string
+  onClick?: () => void
 }
 
-const CardContainer = (props: StackProps) => (
-  <HStack
-    spacing={4}
-    p={4}
-    color="text"
-    border="1px solid"
-    borderColor="border"
-    _hover={{
-      borderRadius: "base",
-      boxShadow: "0 0 1px var(--eth-colors-primary)",
-      background: "tableBackgroundHover",
-    }}
-    {...props}
-  />
-)
-
-type CardProps = CardListItem & Omit<StackProps, "title" | "id">
-
 const Card = ({
   title,
   description,
   caption,
   link,
   image,
-  imageWidth = 20, // Set 20px as default image width, can be overridden if needed
+  className,
   alt,
+  onClick,
+  imageWidth = 20,
   ...props
 }: CardProps) => {
-  const { flipForRtl } = useRtlFlip()
+  const { twFlipForRtl } = useRtlFlip()
   const isLink = !!link
   const isExternal = url.isExternal(link || "")
 
-  const descriptionColor = useColorModeValue("gray.500", "gray.400")
-
   return (
-    <CardContainer {...props}>
-      {image && <Image src={image} alt={alt ?? ""} width={imageWidth} />}
-      <Flex flex="1 1 75%" direction="column">
+    <div
+      className={cn(
+        "text-text flex flex-row items-center gap-4 border p-4",
+        "transition-all duration-200",
+        "hover:bg-background-highlight",
+        className
+      )}
+      onClick={onClick}
+      {...props}
+    >
+      {image && <TwImage src={image} alt={alt ?? ""} width={imageWidth} />}
+      <div className="flex flex-1 basis-3/4 flex-col">
         {isLink ? (
-          <LinkOverlay
-            as={BaseLink}
-            href={link}
-            isExternal={isExternal}
-            hideArrow
-            color="text"
-            textDecoration="none"
-            _hover={{ textDecoration: "none" }}
-          >
-            {title}
+          <LinkOverlay asChild>
+            <BaseLink href={link} hideArrow className="text-body no-underline">
+              {title}
+            </BaseLink>
           </LinkOverlay>
         ) : (
-          <Box>{title}</Box>
+          <div>{title}</div>
         )}
 
-        <Box fontSize="sm" mb={0} color={descriptionColor}>
-          {description}
-        </Box>
-      </Flex>
+        <div className="mb-0 text-sm text-body-medium">{description}</div>
+      </div>
       {caption && (
-        <Flex flex="1 0 25%" align="center" wrap="wrap" me={4}>
-          <Box fontSize="sm" mb={0} opacity={0.6}>
-            {caption}
-          </Box>
-        </Flex>
+        <div className="me-4 flex flex-[1_0_25%] flex-wrap items-center">
+          <div className="mb-0 text-sm opacity-60">{caption}</div>
+        </div>
       )}
-      {isExternal && <Box transform={flipForRtl}>↗</Box>}
-    </CardContainer>
+      {isExternal && <span className={twFlipForRtl}>↗</span>}
+    </div>
   )
 }
 
-export type CardListProps = BoxProps & {
+export type CardListProps = {
   items: CardProps[]
   imageWidth?: number
   clickHandler?: (idx: string | number) => void
   customEventOptions?: MatomoEventOptions
+  className?: string
 }
 
 const CardList = ({
   items,
   imageWidth,
   clickHandler = () => null,
   customEventOptions,
-  ...props
+  className,
 }: CardListProps) => (
-  <Box bg="background.base" w="full" {...props}>
+  <div className={cn("w-full bg-background", className)}>
     {items.map((listItem, idx) => {
       const { link, id } = listItem
       const isLink = !!link
@@ -123,18 +100,19 @@ const CardList = ({
           <Card {...listItem} imageWidth={imageWidth} />
         </LinkBox>
       ) : (
-        <Card
-          key={idx}
-          onClick={() => {
-            customEventOptions && trackCustomEvent(customEventOptions)
-            clickHandler(idx)
-          }}
-          mb={4}
-          {...listItem}
-        />
+        <div key={idx}>
+          <Card
+            onClick={() => {
+              customEventOptions && trackCustomEvent(customEventOptions)
+              clickHandler(idx)
+            }}
+            className="mb-4"
+            {...listItem}
+          />
+        </div>
       )
     })}
-  </Box>
+  </div>
 )
 
 export default CardList

src/components/MergeArticleList.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from "next-i18next"
 
-import CardList, { type CardListItem } from "@/components/CardList"
+import CardList, { type CardProps } from "@/components/CardList"
 
 const MergeArticleList = () => {
   const { t } = useTranslation(["page-upgrades", "page-upgrades-index"])
 
-  const reads: CardListItem[] = [
+  const reads: CardProps[] = [
     {
       title: t("page-upgrades-index:page-upgrade-article-title-ethmerge"),
       description: t(

src/components/StablecoinAccordion/useStablecoinAccordion.ts

@@ -1,6 +1,6 @@
 import { useTranslation } from "next-i18next"
 
-import { CardListItem } from "../CardList"
+import { type CardProps } from "@/components/CardList"
 
 import aaveImg from "@/public/images/dapps/aave.png"
 // -- borrow
@@ -25,7 +25,7 @@ import ethImg from "@/public/images/favicon.png"
 export const useStablecoinAccordion = () => {
   const { t } = useTranslation("page-stablecoins")
 
-  const dapps: Array<CardListItem> = [
+  const dapps: Array<CardProps> = [
     {
       title: "Uniswap",
       image: uniImg,
@@ -52,7 +52,7 @@ export const useStablecoinAccordion = () => {
     },
   ]
 
-  const borrow: Array<CardListItem> = [
+  const borrow: Array<CardProps> = [
     {
       title: "Compound",
       image: compoundImg,
@@ -73,7 +73,7 @@ export const useStablecoinAccordion = () => {
     },
   ]
 
-  const earn: Array<CardListItem> = [
+  const earn: Array<CardProps> = [
     {
       title: t("page-stablecoins-accordion-earn-project-bounties"),
       image: gitcoinImg,
@@ -90,7 +90,7 @@ export const useStablecoinAccordion = () => {
     },
   ]
 
-  const exchanges: Array<CardListItem> = [
+  const exchanges: Array<CardProps> = [
     {
       title: "Coinbase",
       image: coinbaseImg,

src/components/Staking/StakingGuides.tsx

@@ -1,11 +1,11 @@
 import { useTranslation } from "next-i18next"
 
-import CardList, { type CardListItem } from "@/components/CardList"
+import CardList, { type CardProps } from "@/components/CardList"
 
 const StakingGuides = () => {
   const { t } = useTranslation("page-staking")
 
-  const guides: CardListItem[] = [
+  const guides: CardProps[] = [
     {
       title: t("page-staking-guide-title-coincashew-ethereum"),
       link: "https://www.coincashew.com/coins/overview-eth/guide-or-how-to-setup-a-validator-on-eth2-mainnet",

src/pages/get-eth.tsx

@@ -6,8 +6,9 @@ import type { ReactNode } from "react"
 import type { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
 
 import CalloutBanner from "@/components/CalloutBanner"
-import type { CardListItem } from "@/components/CardList"
-import CardList from "@/components/CardList"
+import CardList, {
+  type CardProps as CardListCardProps,
+} from "@/components/CardList"
 import CentralizedExchanges from "@/components/CentralizedExchanges"
 import Emoji from "@/components/Emoji"
 import EthPriceCard from "@/components/EthPriceCard"
@@ -110,7 +111,7 @@ const GetEthPage = ({
     md: "50%",
   })
 
-  const tokenSwaps: CardListItem[] = [
+  const tokenSwaps: CardListCardProps[] = [
     {
       title: "Uniswap",
       link: "https://app.uniswap.org/#/swap",
@@ -137,7 +138,7 @@ const GetEthPage = ({
     },
   ]
 
-  const safetyArticles: CardListItem[] = [
+  const safetyArticles: CardListCardProps[] = [
     {
       title: t("page-get-eth-article-protecting-yourself"),
       link: "https://support.mycrypto.com/staying-safe/protecting-yourself-and-your-funds",

src/pages/wallets/index.tsx

@@ -306,7 +306,7 @@ const WalletsPage = () => {
           >
             <Text>{t("page-wallets-description")}</Text>
             <Text>{t("page-wallets-desc-2")}</Text>
-            <CardList items={guides} mb={{ base: 6, lg: 0 }} />
+            <CardList items={guides} className="mb-6 lg:mb-0" />
           </Box>
           <RightColumn>
             <Text>{t("page-wallets-desc-3")}</Text>