refactor(stakinglaunchpadwidget): migrate stakinglaunchpadwidget to tailwind/shadcn

Author: Baystef

src/components/Staking/StakingLaunchpadWidget.tsx

@@ -1,18 +1,15 @@
 import { useState } from "react"
 import { useTranslation } from "next-i18next"
 import { FaTools } from "react-icons/fa"
-import { Box } from "@chakra-ui/react"
 
-import { ButtonLink } from "@/components/Buttons"
-import Text from "@/components/OldText"
 import Translation from "@/components/Translation"
+import { ButtonLink } from "@/components/ui/buttons/Button"
+import { Flex } from "@/components/ui/flex"
+import Select, { type SelectOnChange } from "@/components/ui/Select"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
-import { Flex } from "../ui/flex"
-import Select, { type SelectOnChange } from "../ui/Select"
-
 type StakingDataOption = { label: string; value: string }
 
 const StakingLaunchpadWidget = () => {
@@ -54,47 +51,44 @@ const StakingLaunchpadWidget = () => {
         "bg-gradient-to-r from-accent-a/10 to-accent-c/10 dark:from-accent-a/20 dark:to-accent-c-hover/20"
       )}
     >
-      <Text as="span" color="text200">
+      <span className="leading-6 text-body-medium">
         <Translation id="page-staking:page-staking-launchpad-widget-span" />
-      </Text>
-      <Box my={4} maxW={{ md: "50%" }}>
+      </span>
+      <div className="my-4 md:max-w-[50%]">
         <Select
           instanceId="staking-launchpad-select"
           options={selectOptions}
           onChange={handleChange}
           defaultValue={selectOptions[0]}
           variant="outline"
         />
-      </Box>
-      <Text>
+      </div>
+      <p className="mb-6 leading-6">
         <Translation id="page-staking:page-staking-launchpad-widget-p1" />
-      </Text>
-      <Text>
+      </p>
+      <p className="mb-6 leading-6">
         <Translation id="page-staking:page-staking-launchpad-widget-p2" />
-      </Text>
-      <Box mb={4}>
-        <ButtonLink
-          href={data[selection].url}
-          width={{ base: "full", md: "auto" }}
-        >
+      </p>
+      <div className="mb-4">
+        <ButtonLink href={data[selection].url} className="w-full md:w-auto">
           {selection === "mainnet"
             ? t("page-staking:page-staking-launchpad-widget-mainnet-start")
             : t("page-staking:page-staking-launchpad-widget-testnet-start")}
         </ButtonLink>
-      </Box>
-      <Text>
+      </div>
+      <p className="mb-6 leading-6">
         <Translation id="page-staking:page-staking-launchpad-widget-p3" />
-      </Text>
-      <Box>
+      </p>
+      <div>
         <ButtonLink
           href="#node-and-client-tools"
           variant="outline"
-          width={{ base: "full", md: "auto" }}
-          leftIcon={<FaTools />}
+          className="w-full md:w-auto"
         >
+          <FaTools />{" "}
           <Translation id="page-staking:page-staking-launchpad-widget-link" />
         </ButtonLink>
-      </Box>
+      </div>
     </Flex>
   )
 }