Merge pull request #14244 from yun-chiao/migrate/action-card

Migrate ActionCard.tsx to tailwind

Author: pettinarip

src/components/ActionCard.tsx

@@ -1,33 +1,18 @@
 import { StaticImageData } from "next/image"
-import type { ReactNode } from "react"
-import {
-  Box,
-  type BoxProps,
-  Flex,
-  Heading,
-  LinkBox,
-  type LinkBoxProps,
-  LinkOverlay,
-  useColorModeValue,
-} from "@chakra-ui/react"
+import type { BaseHTMLAttributes, ElementType, ReactNode } from "react"
 
-import { Image } from "@/components/Image"
-import { BaseLink } from "@/components/Link"
-import Text from "@/components/OldText"
+import { TwImage } from "@/components/Image"
+import InlineLink from "@/components/ui/Link"
+import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
 
-const linkBoxFocusStyles: BoxProps = {
-  borderRadius: "base",
-  boxShadow: "0px 8px 17px rgba(0, 0, 0, 0.15)",
-  bg: "tableBackgroundHover",
-  transition: "transform 0.1s",
-  transform: "scale(1.02)",
-}
-
-const linkFocusStyles: BoxProps = {
-  textDecoration: "none",
-}
+import { cn } from "@/lib/utils/cn"
 
-export type ActionCardProps = Omit<LinkBoxProps, "title"> & {
+import { Flex } from "./ui/flex"
+export type ActionCardProps = Omit<
+  BaseHTMLAttributes<HTMLDivElement>,
+  "title"
+> & {
+  as?: ElementType
   children?: ReactNode
   href: string
   alt?: string
@@ -53,64 +38,43 @@ const ActionCard = ({
   isBottom = true,
   ...props
 }: ActionCardProps) => {
-  const descriptionColor = useColorModeValue("blackAlpha.700", "whiteAlpha.800")
-
   return (
     <LinkBox
-      boxShadow="
-	  0px 14px 66px rgba(0, 0, 0, 0.07),
-    0px 10px 17px rgba(0, 0, 0, 0.03), 0px 4px 7px rgba(0, 0, 0, 0.05)"
-      color="text"
-      flex="1 1 372px"
-      _hover={linkBoxFocusStyles}
-      _focus={linkBoxFocusStyles}
-      className={className}
-      m={4}
+      className={cn(
+        "flex shadow-table hover:scale-[1.02] hover:rounded hover:bg-background-highlight hover:shadow-table-box-hover hover:duration-100 focus:scale-[1.02] focus:rounded focus:shadow-table-box-hover focus:duration-100",
+        className
+      )}
       {...props}
     >
       <Flex
-        h="260px"
-        bg="cardGradient"
-        direction="row"
-        justify={isRight ? "flex-end" : "center"}
-        align={isBottom ? "flex-end" : "center"}
-        className="action-card-image-wrapper"
-        boxShadow="inset 0px -1px 0px rgba(0, 0, 0, 0.1)"
+        className={cn(
+          "flex h-[260px] flex-row bg-gradient-to-r from-accent-a/10 to-accent-c/10",
+          isBottom ? "items-end" : "items-center",
+          isRight ? "justify-end" : "justify-center"
+        )}
       >
-        <Image
+        <TwImage
           src={image}
-          width={imageWidth}
-          maxH="full"
           alt={alt || ""}
-          style={{ objectFit: "cover" }}
+          width={imageWidth}
+          className="max-h-full object-cover p-4"
         />
       </Flex>
-      <Box p={6} className="action-card-content">
-        <Heading
-          as="h3"
-          fontSize="2xl"
-          mt={2}
-          mb={4}
-          fontWeight={600}
-          lineHeight={1.4}
-        >
-          <LinkOverlay
-            as={BaseLink}
-            color="text"
-            hideArrow
-            textDecoration="none"
-            href={href}
-            _hover={linkFocusStyles}
-            _focus={linkFocusStyles}
-          >
-            {title}
+      <div className="flex flex-col justify-center p-6">
+        <h3 className="mb-4 mt-2 text-2xl font-semibold leading-snug">
+          <LinkOverlay asChild>
+            <InlineLink
+              href={href}
+              hideArrow
+              className="text-body no-underline"
+            >
+              {title}
+            </InlineLink>
           </LinkOverlay>
-        </Heading>
-        <Text mb={0} color={descriptionColor}>
-          {description}
-        </Text>
-        {children && <Box mt={8}>{children}</Box>}
-      </Box>
+        </h3>
+        <p className={"mb-0 text-body/65"}>{description}</p>
+        {children && <div className="mt-8">{children}</div>}
+      </div>
     </LinkBox>
   )
 }

src/pages/community.tsx

@@ -299,15 +299,8 @@ const CommunityPage = () => {
           </Flex>
           <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={{ base: 8, lg: 0 }}>
             {cards.map((card, idx) => (
-              <Box
-                as={ActionCard}
-                minW={{ base: "min(100%, 240px)", lg: "440px" }}
-                m={{ base: 0, lg: 4 }}
-                borderRadius="sm"
-                border="1px solid"
-                borderColor="text"
-                bg="background.base"
-                boxShadow={theme.colors.cardBoxShadow}
+              <ActionCard
+                className="m-0 flex-col rounded-sm border lg:m-4"
                 key={idx}
                 title={card.title}
                 description={card.description}

src/pages/contributing/translation-program/acknowledgements.tsx

@@ -198,8 +198,9 @@ const TranslatorAcknowledgements = () => {
             "page-contributing-translation-program-acknowledgements-our-translators-1"
           )}
         </Text>
-        <Box
-          as={ActionCard}
+        <ActionCard
+          className="my-8"
+          imageWidth={260}
           href="/contributing/translation-program/contributors/"
           title={t(
             "page-contributing-translation-program-acknowledgements-our-translators-view-all"
@@ -208,25 +209,6 @@ const TranslatorAcknowledgements = () => {
             "page-contributing-translation-program-acknowledgements-our-translators-cta"
           )}
           image={whatIsEthereumImg}
-          display={{ base: "block", sm: "flex" }}
-          flex="none"
-          my={8}
-          mx={0}
-          sx={{
-            ".action-card-image-wrapper": {
-              p: 4,
-              minW: { sm: "260px" },
-            },
-            ".action-card-content": {
-              display: { sm: "flex" },
-              justifyContent: { sm: "center" },
-              flexDirection: { sm: "column" },
-              ms: { sm: 4 },
-            },
-            p: {
-              mb: 0,
-            },
-          }}
         />
       </Content>
 

src/pages/eth.tsx

@@ -241,28 +241,7 @@ const CentralColumn = (props: ChildOnlyProp) => (
 )
 
 const CentralActionCard = (props: ComponentProps<typeof ActionCard>) => (
-  <ActionCard
-    display={{ base: "block", sm: "flex" }}
-    flex="none"
-    my={8}
-    mx={0}
-    sx={{
-      ".action-card-image-wrapper": {
-        p: 4,
-        minW: { sm: "260px" },
-      },
-      ".action-card-content": {
-        display: { sm: "flex" },
-        justifyContent: { sm: "center" },
-        flexDirection: { sm: "column" },
-        ms: { sm: 4 },
-      },
-      p: {
-        mb: { sm: 0 },
-      },
-    }}
-    {...props}
-  />
+  <ActionCard className="my-8" imageWidth={260} {...props} />
 )
 
 export const getStaticProps = (async ({ locale }) => {