migrate to tailwind

Author: pettinarip

src/components/Banners/BugBountyBanner/index.tsx

@@ -1,17 +1,17 @@
 // Libraries
 import React from "react"
-import { Center, Text } from "@chakra-ui/react"
 
 // Components
 import BannerNotification from "@/components/Banners/BannerNotification"
+import { Center } from "@/components/ui/flex"
 
 const BugBountyBanner = () => (
   <BannerNotification shouldShow>
     <Center>
-      <Text m={0} p={0}>
+      <p>
         All Dencun-related bounties currently receive a 2x bonus multiplier (up
         to 500,000 USD) up to two weeks before the scheduled mainnet hardfork.
-      </Text>
+      </p>
     </Center>
   </BannerNotification>
 )

src/components/Banners/UpgradeBannerNotification.tsx

@@ -1,22 +1,20 @@
-import { Box } from "@chakra-ui/react"
-
 import Emoji from "../Emoji"
-import InlineLink from "../Link"
+import InlineLink from "../ui/Link"
 
 import BannerNotification from "./BannerNotification"
 
 const UpgradeBannerNotification = () => (
   <BannerNotification shouldShow>
     <Emoji text=":megaphone:" className="me-4 flex-shrink-0 text-2xl" />
-    <Box>
+    <div>
       <b>
         We&apos;ve deprecated our use of &apos;Eth1&apos; and &apos;Eth2&apos;
         terms.
       </b>{" "}
       <InlineLink href="https://blog.ethereum.org/2022/01/24/the-great-eth2-renaming/">
         Read the full announcement
       </InlineLink>
-    </Box>
+    </div>
   </BannerNotification>
 )
 

src/components/CopyToClipboard.tsx

@@ -1,4 +1,6 @@
-import { Box, useClipboard } from "@chakra-ui/react"
+import { cn } from "@/lib/utils/cn"
+
+import { useClipboard } from "@/hooks/useClipboard"
 
 export type CopyToClipboardProps = {
   text: string
@@ -11,16 +13,15 @@ const CopyToClipboard = ({
   text,
   inline = false,
 }: CopyToClipboardProps) => {
-  const { onCopy, hasCopied } = useClipboard(text, { timeout: 1500 })
+  const { onCopy, hasCopied } = useClipboard({ timeout: 1500 })
 
   return (
-    <Box
-      cursor="pointer"
-      onClick={onCopy}
-      display={inline ? "inline" : "block"}
+    <div
+      className={cn("cursor-pointer", inline ? "inline" : "block")}
+      onClick={() => onCopy(text)}
     >
       {children(hasCopied)}
-    </Box>
+    </div>
   )
 }
 

src/components/EnvWarningBanner.tsx

@@ -1,11 +1,10 @@
 import React from "react"
-import { FlexProps } from "@chakra-ui/react"
 
 import InfoBanner from "./InfoBanner"
 import Translation from "./Translation"
 
-const EnvWarningBanner = ({ ...flexProps }: FlexProps) => (
-  <InfoBanner isWarning {...flexProps}>
+const EnvWarningBanner = () => (
+  <InfoBanner isWarning>
     <Translation id="page-tutorials-env-banner" />
   </InfoBanner>
 )

src/components/EthVideo.tsx

@@ -1,5 +1,4 @@
-import { Box } from "@chakra-ui/react"
-import { useColorModeValue } from "@chakra-ui/react"
+import useColorModeValue from "@/hooks/useColorModeValue"
 
 const EthVideo = () => {
   const src = useColorModeValue(
@@ -8,7 +7,7 @@ const EthVideo = () => {
   )
 
   return (
-    <Box>
+    <div>
       <video
         id="hero-video"
         width="100%"
@@ -19,7 +18,7 @@ const EthVideo = () => {
         loop
         muted
       />
-    </Box>
+    </div>
   )
 }
 

src/components/FeaturedText/index.tsx

@@ -1,17 +1,10 @@
-import { Box } from "@chakra-ui/react"
-
 import type { ChildOnlyProp } from "@/lib/types"
 
 function FeaturedText({ children }: ChildOnlyProp) {
   return (
-    <Box
-      ps={4}
-      ms={-4}
-      borderInlineStart="1px dotted"
-      borderColor="primary.base"
-    >
+    <div className="-ms-4 border border-dashed border-primary ps-4">
       {children}
-    </Box>
+    </div>
   )
 }
 

src/components/IdAnchor.tsx

@@ -1,5 +1,4 @@
 import { CiLink } from "react-icons/ci"
-import { Icon } from "@chakra-ui/react"
 
 import Link from "@/components/Link"
 
@@ -16,7 +15,7 @@ const IdAnchor = ({ id }: { id?: string }) => {
       _focus={{ opacity: 1 }}
       transition="opacity 0.1s ease-in-out"
     >
-      <Icon as={CiLink} fontSize="xl" me="1" />
+      <CiLink className="me-1 text-xl" />
     </Link>
   )
 }

src/components/LearningToolsCardGrid.tsx

@@ -1,5 +1,4 @@
 import React from "react"
-import { Grid } from "@chakra-ui/react"
 
 import { LearningToolsCardGridProps } from "@/lib/types"
 
@@ -8,11 +7,7 @@ import Translation from "./Translation"
 
 const LearningToolsCardGrid = ({ category }: LearningToolsCardGridProps) => {
   return (
-    <Grid
-      templateColumns="repeat(auto-fill, minmax(min(100%, 280px), 1fr))"
-      gap={8}
-      mb={8}
-    >
+    <div className="mb-8 grid grid-cols-[repeat(auto-fill,minmax(min(100%,280px),1fr))] gap-8">
       {category
         .sort(({ locales }) => (locales?.length ? -1 : 0))
         .map(({ name, description, background, url, alt, image, subjects }) => (
@@ -28,7 +23,7 @@ const LearningToolsCardGrid = ({ category }: LearningToolsCardGridProps) => {
             <Translation id={description} />
           </ProductCard>
         ))}
-    </Grid>
+    </div>
   )
 }
 

src/components/MarkdownImage.tsx

@@ -1,14 +1,13 @@
 import { extname } from "path"
 
-import { Flex } from "@chakra-ui/react"
-
-import { Image, type ImageProps } from "@/components/Image"
-import Link from "@/components/Link"
+import { type ImageProps, TwImage } from "@/components/Image"
 
 import { toPosixPath } from "@/lib/utils/relativePath"
 
 import { CONTENT_IMAGES_MAX_WIDTH } from "@/lib/constants"
 
+import InlineLink from "./ui/Link"
+
 interface MarkdownImageProps extends Omit<ImageProps, "width" | "height"> {
   width: string
   height: string
@@ -42,20 +41,25 @@ const MarkdownImage = ({
   return (
     // display the wrapper as a `span` to avoid dom nesting warnings as mdx
     // sometimes wraps images in `p` tags
-    <Flex as="span" justify="center">
-      <Link href={transformedSrc} target="_blank" rel="noopener" locale={false}>
-        <Image
+    <span className="flex justify-center">
+      <InlineLink
+        href={transformedSrc}
+        target="_blank"
+        rel="noopener"
+        locale={false}
+      >
+        <TwImage
           alt={alt}
           width={imageWidth}
           height={imageHeight}
           loading="lazy"
           src={transformedSrc}
           unoptimized={isAnimated}
-          h="auto"
+          className="h-auto"
           {...rest}
         />
-      </Link>
-    </Flex>
+      </InlineLink>
+    </span>
   )
 }
 

src/components/MergeArticleList.tsx

@@ -1,5 +1,4 @@
 import { useTranslation } from "next-i18next"
-import { Box } from "@chakra-ui/react"
 
 import CardList, { type CardListItem } from "@/components/CardList"
 
@@ -78,9 +77,9 @@ const MergeArticleList = () => {
   ]
 
   return (
-    <Box mb="4rem">
+    <div className="mb-16">
       <CardList items={reads} />
-    </Box>
+    </div>
   )
 }