feat(MergeInfographic): migrate to Tailwind

Author: TylerAPfledderer

src/components/MergeInfographic/index.tsx

@@ -1,99 +1,83 @@
 import { useTranslation } from "next-i18next"
-import { AspectRatio, Box, chakra, Icon } from "@chakra-ui/react"
+import type { SVGTextElementAttributes } from "react"
 
 import Translation from "@/components/Translation"
 
+import { cn } from "@/lib/utils/cn"
+
+import { createIconBase } from "../icons/icon-base"
+import { HStack } from "../ui/flex"
+
 import { Background } from "./Background"
 
-const Text = chakra("text", {
-  baseStyle: {
-    textAnchor: "start",
-    fill: "currentColor",
-  },
-})
+const Text = ({
+  className,
+  ...rest
+}: SVGTextElementAttributes<SVGTextElement>) => (
+  <text
+    className={cn("fill-current [text-anchor:start]", className)}
+    {...rest}
+  />
+)
 
-const SvgText = () => {
+const SvgTextInternal = () => {
   const { t } = useTranslation(["page-upgrades-index"])
-  const [sm, lg] = ["7px", "8px"]
+  const [sm, lg] = ["text-[7px]", "text-[8px]"]
 
   return (
-    <Icon
-      position="absolute"
-      zIndex={1}
-      width="100%"
-      height="100%"
-      viewBox="0 0 250 110"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlnsXlink="http://www.w3.org/1999/xlink"
-      aria-hidden="true"
-    >
-      <Text x="2%" y="35%" fontSize={lg}>
+    <>
+      <Text className={lg} x="2%" y="35%">
         ⛏ {t("page-upgrades-index:docs-nav-proof-of-work")}
       </Text>
-      <Text x="47%" y="35%" fontSize={lg}>
+      <Text className={lg} x="47%" y="35%">
         🌱 {t("page-upgrades-index:docs-nav-proof-of-stake")}
       </Text>
-      <Text x="11%" y="70%" fontSize={sm}>
+      <Text className={sm} x="11%" y="70%">
         🚀 {t("common:beacon-chain")}
       </Text>
-      <Text x="43%" y="12.5%" fontSize={sm}>
+      <Text className={sm} x="43%" y="12.5%">
         🐼 {t("page-upgrades-index:page-upgrades-get-involved-ethresearch-2")}
       </Text>
-      <Text x="63%" y="95%" fontSize={sm}>
+      <Text className={sm} x="63%" y="95%">
         🌳 {t("page-upgrades-index:page-upgrades-get-involved-ethresearch-1")}
       </Text>
-    </Icon>
+    </>
   )
 }
 
+const SvgText = createIconBase({
+  displayName: "SvgText",
+  viewBox: "0 0 250 110",
+  version: "1.1",
+  xmlns: "http://www.w3.org/2000/svg",
+  xmlnsXlink: "http://www.w3.org/1999/xlink",
+  "aria-hidden": true,
+  className: "absolute size-full z-[1]",
+  children: <SvgTextInternal />,
+})
+
 const MergeInfographic = () => {
   const { t } = useTranslation()
 
   return (
-    <AspectRatio
+    <div
+      className="relative isolate aspect-[25/11] w-full"
       role="img"
       aria-label={t(
         "page-upgrades-index:page-upgrades-merge-infographic-alt-text"
       )}
-      position="relative"
-      width="100%"
-      ratio={25 / 11}
-      sx={{
-        isolation: "isolate",
-      }}
     >
-      <Box>
-        <Box
-          position="absolute"
-          top="40%"
-          insetInlineStart="2%"
-          width="81%"
-          height="18%"
-          margin={0}
-          padding={0}
-          zIndex={2}
-          display="flex"
-          justifyContent="center"
-          alignItems="center"
-          lineHeight="1em"
-          textAlign="center"
-          maxHeight="2em"
-          color="background.base"
-          fontSize={{
-            base: "0.625em",
-            sm: "0.875em",
-            md: "1.125em",
-            lg: "1.375em",
-          }}
+      <div>
+        <HStack
+          className="absolute left-[2%] top-[40%] z-[2] h-[18%] max-h-[2em] w-[81%] justify-center text-center text-[0.625em] leading-[1em] text-background sm:text-[0.875em] md:text-[1.125em] lg:text-[1.375em]"
           aria-hidden="true"
         >
           <Translation id="page-upgrades:page-upgrades-merge-infographic-el" />
-        </Box>
+        </HStack>
         <SvgText />
         <Background className="absolute z-0 size-full" aria-hidden="true" />
-      </Box>
-    </AspectRatio>
+      </div>
+    </div>
   )
 }