Merge pull request #14035 from Baystef/migrate/dataproductcard

Migrate DataProductCard component to shadcn/tailwind

Author: pettinarip

src/components/DataProductCard.tsx

@@ -1,17 +1,11 @@
 import React from "react"
 import { StaticImageData } from "next/image"
-import {
-  Box,
-  Flex,
-  Heading,
-  LinkBox,
-  LinkOverlay,
-  useColorModeValue,
-} from "@chakra-ui/react"
 
-import { Image } from "@/components/Image"
+import { TwImage } from "@/components/Image"
+import { Flex } from "@/components/ui/flex"
 
-import Text from "./OldText"
+import InlineLink from "./ui/Link"
+import { LinkBox, LinkOverlay } from "./ui/link-box"
 
 export interface DataRow {
   logo: StaticImageData
@@ -23,7 +17,7 @@ export type DataProductCardProps = {
   url: string
   background: string
   image: StaticImageData
-  imgWidth: string
+  imgWidth: number
   alt?: string
   name: string
   description?: string
@@ -40,104 +34,53 @@ const DataProductCard = ({
   description,
   data,
 }: DataProductCardProps) => {
-  const boxShadow = useColorModeValue("tableBox.light", "tableBox.dark")
-
   return (
-    <LinkBox
-      color="text"
-      background="searchBackground"
-      border="1px solid"
-      borderColor="lightBorder"
-      borderRadius="base"
-      overflow="hidden"
-      boxShadow={boxShadow}
-      display="flex"
-      flexDirection="column"
-      _hover={{
-        background: "tableBackgroundHover",
-        boxShadow: boxShadow,
-        transition: "transform 0.1s ease 0s",
-        transform: "scale(1.02)",
-      }}
-    >
+    <LinkBox className="flex flex-col overflow-hidden rounded border shadow-table-box transition-transform duration-100 ease-linear hover:scale-[1.02] hover:bg-background-highlight focus:scale-[1.02] focus:bg-background-highlight">
       <Flex
-        alignItems="center"
-        justifyContent="center"
-        boxShadow="rgb(0 0 0 / 10%) 0px -1px 0px inset;"
-        minH="200px"
-        bg={background}
+        className={
+          "min-h-[200px] items-center justify-center shadow-[rgb(0_0_0/_10%)_0px_-1px_0px_inset]"
+        }
+        style={{ background }}
       >
-        <Image
-          src={image}
-          objectFit="cover"
+        <TwImage
           alt={alt ? alt : `${name} logo`}
-          w={imgWidth}
-          alignSelf="center"
-          maxWidth={{ base: "311px", sm: "372px" }}
-          maxHeight="257px"
+          className="max-h-[257px] max-w-[311px] self-center object-cover sm:max-w-[372px]"
+          src={image}
+          width={imgWidth}
         />
       </Flex>
-      <Flex
-        textAlign="start"
-        flexDirection="column"
-        justifyContent="space-between"
-      >
-        <Box>
-          <Heading
-            as="h3"
-            size="lg"
-            fontSize="2xl"
-            fontWeight="600"
-            lineHeight="1.4"
-            my={8}
-            mx={4}
-            mb={4}
-          >
-            <LinkOverlay href={url} isExternal>
-              {name}
+      <Flex className="flex-col justify-between text-left">
+        <div>
+          <h3 className="mx-4 my-8 mb-4 text-2xl font-semibold">
+            <LinkOverlay asChild>
+              <InlineLink href={url} hideArrow>
+                {name}
+              </InlineLink>
             </LinkOverlay>
-          </Heading>
-          <Text fontSize="sm" mx={4} mb={4} lineHeight="140%">
-            {description}
-          </Text>
-        </Box>
+          </h3>
+          <p className="mx-4 mb-4 text-sm leading-[140%]">{description}</p>
+        </div>
         {data && (
-          <Box
-            overflowY="scroll"
-            maxHeight="160px"
-            mb={4}
-            borderTop="1px solid"
-            borderColor="lightBorder"
-          >
+          <div className="mb-4 max-h-[160px] overflow-y-scroll border-t">
             {data.map(({ logo, coin, apy }, idx) => (
               <Flex
                 key={idx}
-                color="text300"
-                fontSize="sm"
-                justify="space-between"
-                p={4}
-                textTransform="uppercase"
-                border="1px solid"
-                borderColor="lightBorder"
-                borderInlineStart="0"
-                borderInlineEnd="0"
+                className="justify-between border border-x-0 p-4 text-sm uppercase"
               >
-                <Flex alignItems="center">
+                <Flex className="items-center">
                   {logo && (
-                    <Image
+                    <TwImage
+                      className="me-2 min-w-6 object-cover"
                       src={logo}
-                      objectFit="cover"
                       alt=""
-                      minWidth="24px"
-                      me={2}
                     />
                   )}
                   {coin}
                 </Flex>
-                <Flex alignItems="center">{apy}% APY</Flex>
+                <Flex className="items-center">{apy}% APY</Flex>
               </Flex>
             ))}
-          </Box>
+          </div>
         )}
       </Flex>
     </LinkBox>

src/pages/stablecoins.tsx

@@ -349,7 +349,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
       url: "https://aave.com",
       alt: t("aave-logo"),
       image: aaveImg,
-      width: "64px",
+      width: 64,
       name: "Aave",
       description: t("page-stablecoins-stablecoins-dapp-description-1"),
     },
@@ -358,7 +358,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
       url: "https://compound.finance",
       alt: t("compound-logo"),
       image: compoundImg,
-      width: "160px",
+      width: 160,
       name: "Compound",
       description: t("page-stablecoins-stablecoins-dapp-description-2"),
     },
@@ -367,7 +367,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
       url: "https://summer.fi/",
       alt: t("summerfi-logo"),
       image: summerfiImg,
-      width: "80px",
+      width: 80,
       name: "Summer.fi",
       description: t("page-stablecoins-stablecoins-dapp-description-4"),
     },