feat: migrate HorizontalCard to tailwind

Author: kushagrasarathe

src/components/HorizontalCard.tsx

@@ -1,35 +1,37 @@
 import React, { ReactNode } from "react"
-import { Box, Flex, FlexProps } from "@chakra-ui/react"
 
 import { cn } from "@/lib/utils/cn"
 
 import Emoji from "./Emoji"
-import Text from "./OldText"
 
-export type HorizontalCardProps = Omit<FlexProps, "title"> & {
+export interface HorizontalCardProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
   emoji: string
+  emojiClassName?: string
   title?: ReactNode
   description: ReactNode
+  children?: ReactNode
 }
 
 const HorizontalCard = ({
   emoji,
+  emojiClassName,
   title,
   description,
   children,
   className,
-  ...rest
-}: HorizontalCardProps) => (
-  <Flex borderRadius="base" {...rest}>
-    <Emoji className={cn("text-5xl", className)} text={emoji} />
-    <Box flexGrow="0" flexShrink="1" flexBasis="75%" ms="8">
-      <Text fontSize="lg">{title}</Text>
-      <Text mt="-4" mb="2">
-        {description}
-      </Text>
-      <>{children}</>
-    </Box>
-  </Flex>
-)
+  ...props
+}: HorizontalCardProps) => {
+  return (
+    <div className={cn("my-2 flex items-start gap-8", className)} {...props}>
+      <Emoji text={emoji} className={cn("text-5xl", emojiClassName)} />
+      <div className="flex-shrink flex-grow-0 basis-3/4 space-y-2">
+        <div className="text-lg">{title}</div>
+        <div className="text-base">{description}</div>
+        {children}
+      </div>
+    </div>
+  )
+}
 
 export default HorizontalCard

src/pages/eth.tsx

@@ -212,7 +212,7 @@ const CardContainer = (props: FlexProps) => (
 )
 
 const TokenCard = (props: ComponentProps<typeof HorizontalCard>) => (
-  <HorizontalCard minW="full" my={2} mx={0} borderRadius={0} {...props} />
+  <HorizontalCard {...props} className="mx-0 my-2 min-w-full rounded-none" />
 )
 
 const TextDivider = () => (

src/pages/gas.tsx

@@ -303,8 +303,8 @@ const GasPage = () => {
                   key={benefit.emoji}
                   emoji={benefit.emoji}
                   description={benefit.description}
-                  className="text-5xl"
-                  align="center"
+                  emojiClassName="text-5xl"
+                  className="flex items-center py-2"
                 />
               </Box>
             ))}

src/pages/stablecoins.tsx

@@ -458,7 +458,7 @@ const StablecoinsPage = ({ markets, marketsHasError }) => {
                 <HorizontalCard
                   emoji={token.emoji}
                   description={token.description}
-                  className="text-5xl"
+                  emojiClassName="text-5xl"
                 />
               </Box>
             ))}

src/pages/wallets/index.tsx

@@ -117,11 +117,8 @@ export const StyledCard = (props: ComponentPropsWithRef<typeof Card>) => (
 )
 const ChecklistItem = (props: HorizontalCardProps) => (
   <HorizontalCard
-    border={0}
-    display="flex"
-    className="text-2xl"
-    alignItems="flex-start"
-    mb={4}
+    emojiClassName="text-2xl"
+    className="flex-start mb-4 flex border-0"
     {...props}
   />
 )
@@ -362,16 +359,11 @@ const WalletsPage = () => {
           <Box>
             {types.map((type, idx) => (
               <HorizontalCard
-                minWidth="100%"
-                marginTop={2}
-                marginBottom={2}
-                ms={0}
-                me={0}
                 key={idx}
                 emoji={type.emoji}
                 description={type.description}
-                className="text-[2.5rem]"
-                alignItems="center"
+                className="my-0.5 w-[100%] items-center"
+                emojiClassName={"text-[2.5rem]"}
               />
             ))}
           </Box>