migrate internal layout components to tw

Author: pettinarip

src/layouts/md/Roadmap.tsx

@@ -1,5 +1,3 @@
-import { SimpleGrid } from "@chakra-ui/react"
-
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, RoadmapFrontmatter } from "@/lib/interfaces"
 
@@ -14,7 +12,7 @@ import { ContentLayout } from "../ContentLayout"
 import RoadmapHubHeroImage from "@/public/images/heroes/roadmap-hub-hero.jpg"
 
 const CardGrid = (props: ChildOnlyProp) => (
-  <SimpleGrid columns={{ base: 1, md: 2 }} spacing={8} {...props} />
+  <div className="grid grid-cols-1 gap-8 md:grid-cols-2" {...props} />
 )
 
 // Roadmap layout components

src/layouts/md/Staking.tsx

@@ -1,6 +1,5 @@
 import { HTMLAttributes } from "react"
 import { useTranslation } from "next-i18next"
-import { Box, type BoxProps, Grid, SimpleGrid, Text } from "@chakra-ui/react"
 
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, StakingFrontmatter } from "@/lib/interfaces"
@@ -35,85 +34,28 @@ const Heading4 = (props: HTMLAttributes<HTMLHeadingElement>) => (
   <MdHeading4 className="font-semibold max-md:text-md" {...props} />
 )
 
-const Paragraph = (props: ChildOnlyProp) => (
-  <Text fontSize="md" mt={8} mb={4} color="text300" {...props} />
-)
-
-const Pre = (props: ChildOnlyProp) => (
-  <Text
-    as="pre"
-    maxW="full"
-    overflowX="scroll"
-    bgColor="preBackground"
-    borderRadius="base"
-    p={4}
-    border="1px solid"
-    borderColor="preBorder"
-    whiteSpace="pre-wrap"
-    {...props}
-  />
-)
-
 export const InfoGrid = (props: ChildOnlyProp) => (
-  <Grid
-    templateColumns="repeat(auto-fill, minmax(min(100%, 340px), 1fr))"
-    gap={8}
-    sx={{
-      "& > div": {
-        h: "fit-content",
-        m: 0,
-        "&:hover": {
-          transition: "0.1s",
-          transform: "scale(1.01)",
-          svg: {
-            transition: "0.1s",
-            transform: "scale(1.1)",
-          },
-        },
-      },
-    }}
+  <div
+    className="grid grid-cols-[repeat(auto-fill,_minmax(100%,_340px),_1fr)] gap-8"
     {...props}
   />
 )
 
 const CardGrid = (props: ChildOnlyProp) => (
-  <SimpleGrid
-    columns={{ base: 1, md: 3 }}
-    spacing={8}
-    m={{ base: "auto", md: 0 }}
-    sx={{
-      h3: {
-        mt: 0,
-      },
-    }}
+  <div
+    className="m-auto grid grid-cols-1 gap-8 md:m-0 md:grid-cols-3 [&_h3]:mt-0"
     {...props}
   />
 )
 
-const TableContainer = (props: BoxProps) => (
-  <Box
-    w="fit-content"
-    mx={["auto", null, null, 0]}
-    sx={{
-      table: {
-        borderCollapse: "separate",
-        borderSpacing: "1rem 0",
-      },
-      th: {
-        whiteSpace: "break-spaces !important",
-        textAlign: "center",
-      },
-    }}
-    {...props}
-  />
+const TableContainer = (props: ChildOnlyProp) => (
+  <div className="mx-auto w-fit lg:mx-0" {...props} />
 )
 
 // Staking layout components
 export const stakingComponents = {
   h1: Heading1,
   h4: Heading4,
-  p: Paragraph,
-  pre: Pre,
   CardGrid,
   DocLink,
   InfoGrid,

src/layouts/md/Translatathon.tsx

@@ -1,12 +1,10 @@
-import { Box, Flex, Grid, Text } from "@chakra-ui/react"
-
 import type { ChildOnlyProp } from "@/lib/types"
 import type { MdPageContent, SharedFrontmatter } from "@/lib/interfaces"
 
 import { List as ButtonDropdownList } from "@/components/ButtonDropdown"
 import Card from "@/components/Card"
 import { ContentHero, ContentHeroProps } from "@/components/Hero"
-import { Image } from "@/components/Image"
+import { TwImage as Image } from "@/components/Image"
 import { ApplyNow } from "@/components/Translatathon/ApplyNow"
 import { APPLICATION_URL } from "@/components/Translatathon/constants"
 import { DatesAndTimeline } from "@/components/Translatathon/DatesAndTimeline"
@@ -16,6 +14,7 @@ import { TranslatathonCalendar } from "@/components/Translatathon/TranslatathonC
 import { TranslatathonInANutshell } from "@/components/Translatathon/TranslatathonInANutshell"
 import TranslatathonPrizes from "@/components/Translatathon/TranslatathonPrizes"
 import { TranslationHubCallout } from "@/components/Translatathon/TranslationHubCallout"
+import { Flex } from "@/components/ui/flex"
 
 import { ContentLayout } from "../ContentLayout"
 
@@ -25,80 +24,50 @@ import robotImage from "@/public/images/wallet.png"
 
 const ContentSplit = ({ children }) => {
   return (
-    <Flex w="full" direction={{ base: "column", md: "row" }}>
-      <Box>{children}</Box>
-      <Flex maxHeight="300px">
-        <Image src={robotImage} alt="robot" style={{ objectFit: "contain" }} />
+    <Flex className="w-full flex-col md:flex-row">
+      <div>{children}</div>
+      <Flex className="max-h-[300px]">
+        <Image src={robotImage} alt="robot" className="object-contain" />
       </Flex>
     </Flex>
   )
 }
 
 const TwoColumnContent = (props: ChildOnlyProp) => (
   <Flex
-    w="full"
-    direction={{ base: "column", md: "row" }}
-    align="stretch"
-    me={{ lg: 8 }}
-    mt={8}
-    gap={8}
+    className="mt-8 w-full flex-col items-stretch gap-8 md:flex-row lg:me-8"
     {...props}
   />
 )
 
 const WhyWeDoItColumn = (props: ChildOnlyProp) => (
-  <Flex
-    w="full"
-    m={{ base: "auto 0", lg: 0 }}
-    me={{ lg: 8 }}
-    direction="column"
-  >
-    <Box mx="auto" height="272">
-      <Image src={WhyWeDoItImage} alt="" height="272" />
-    </Box>
-    <Box>{props.children}</Box>
+  <Flex className="my-auto w-full flex-col lg:m-0 lg:me-8">
+    <div className="mx-auto h-[272px]">
+      <Image src={WhyWeDoItImage} alt="" className="h-[272px]" />
+    </div>
+    <div>{props.children}</div>
   </Flex>
 )
 
 const HowDoesItWorkColumn = (props: ChildOnlyProp) => (
-  <Flex
-    w="full"
-    m={{ base: "auto 0", lg: 0 }}
-    ms={{ lg: 8 }}
-    direction="column"
-  >
-    <Box mx="auto" height="272">
-      <Image src={HowDoesItWorkImage} alt="" maxHeight="272" />
-    </Box>
-    <Box>{props.children}</Box>
+  <Flex className="my-auto w-full flex-col lg:m-0 lg:ms-8">
+    <div className="mx-auto h-[272px]">
+      <Image src={HowDoesItWorkImage} alt="" className="h-[272px]" />
+    </div>
+    <div>{props.children}</div>
   </Flex>
 )
 
 const CardContent = (props: ChildOnlyProp) => (
-  <Flex
-    w="full"
-    m={{ base: "auto 0", lg: 0 }}
-    borderRadius={4}
-    border="1px solid"
-    borderColor="body.light"
-    direction="column"
-    px={8}
-    pb={8}
-    flex="1"
-  >
+  <Flex className="my-auto w-full flex-1 flex-col rounded border border-body-light px-8 pb-8 lg:m-0">
     {props.children}
   </Flex>
 )
 
 const CardContainer = (props: ChildOnlyProp) => (
-  <Grid
-    templateColumns="repeat(auto-fill, minmax(min(100%, 280px), 1fr))"
-    gap={8}
-    mb={20}
-    mt={{ base: 8, lg: 0 }}
-  >
+  <div className="mb-20 mt-8 grid grid-cols-[repeat(auto-fill,_minmax(100%,_280px),_1fr)] gap-8 lg:mt-0">
     {props.children}
-  </Grid>
+  </div>
 )
 
 const EmojiCard = ({ emoji, title, description }) => (
@@ -192,12 +161,12 @@ export const TranslatathonLayout = ({
     blurDataURL: "",
     description: (
       <>
-        <Text>Welcome to the ethereum.org Translatathon!</Text>
-        <Text>
+        <p>Welcome to the ethereum.org Translatathon!</p>
+        <p>
           The translatathon is a competitive hackathon-style event where you can
           compete for prizes by translating ethereum.org content into different
           languages.
-        </Text>
+        </p>
       </>
     ),
     buttons: [