diff --git a/src/components/MergeInfographic/Background.tsx b/src/components/MergeInfographic/Background.tsx index 9442dd8806f..027463ceb5d 100644 --- a/src/components/MergeInfographic/Background.tsx +++ b/src/components/MergeInfographic/Background.tsx @@ -1,92 +1,88 @@ -/* eslint-disable react/jsx-key */ -import { createIcon } from "@chakra-ui/react" +import { createIconBase } from "../icons/icon-base" -const [w, h] = [250, 110] -export const Background = createIcon({ +export const Background = createIconBase({ displayName: "MergeInfographicBackground", - viewBox: `0 0 ${w} ${h}`, - defaultProps: { - height: `${h}px`, - width: `${w}px`, - fill: "currentColor", - }, - path: [ - - - - - - - - - - - - - - , - - - - - , - ], + viewBox: `0 0 250 110`, + className: "w-[250px] h-[110px] fill-current", + children: ( + <> + + + + + + + + + + + + + + + + + + + + + ), }) diff --git a/src/components/MergeInfographic/index.tsx b/src/components/MergeInfographic/index.tsx index 344dbbd7e75..2dc30128ea1 100644 --- a/src/components/MergeInfographic/index.tsx +++ b/src/components/MergeInfographic/index.tsx @@ -1,105 +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) => ( + +) -const SvgText = () => { +const SvgTextInternal = () => { const { t } = useTranslation(["page-upgrades-index"]) - const [sm, lg] = ["7px", "8px"] + const [sm, lg] = ["text-[7px]", "text-[8px]"] return ( - + ) } +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: , +}) + const MergeInfographic = () => { const { t } = useTranslation() return ( - - - + + - - +