refactor(roadmapimagecontent): migrate roadmap/roadmapimagecontent to…

… shadcn/tailwind
ethereum · Oct 8, 2024 · 81d1bf3 · 81d1bf3
1 parent 2e0e0ed
commit 81d1bf3
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/src/components/Roadmap/RoadmapImageContent.tsx b/src/components/Roadmap/RoadmapImageContent.tsx
@@ -1,6 +1,5 @@
-import { Center, Flex, Heading, Stack } from "@chakra-ui/react"
-
-import { Image } from "@/components/Image"
+import { TwImage } from "@/components/Image"
+import { Center, Flex, Stack } from "@/components/ui/flex"
 
 import wallet from "@/public/images/wallet.png"
 
@@ -10,16 +9,16 @@ export type RoadmapImageContentProps = {
 }
 
 const RoadmapImageContent = ({ children, title }: RoadmapImageContentProps) => (
-  <Stack mb={1} mt={16}>
-    <Heading as="h3">{title}</Heading>
-    <Flex flexDir={{ base: "column", lg: "row" }}>
-      <Stack mb={4}>{children}</Stack>
-      <Center minW="fit-content">
-        <Image
+  <Stack className="mb-1 mt-16">
+    <h3>{title}</h3>
+    <Flex className="flex-col lg:flex-row">
+      <Stack className="mb-4">{children}</Stack>
+      <Center className="min-w-fit">
+        <TwImage
+          className="object-contain"
           src={wallet}
           alt="Ethereum Wallet"
           width={350}
-          style={{ objectFit: "contain" }}
         />
       </Center>
     </Flex>