Merge pull request #14201 from Baystef/migrate/withdrawalstabcomparison

Migrate WithdrawalsTabComparison to tailwind/shadcn
ethereum · Nov 4, 2024 · c925312 · c925312
2 parents 1e68862 + c3d3036
commit c925312
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 52 deletions.
diff --git a/src/components/Staking/WithdrawalsTabComparison.tsx b/src/components/Staking/WithdrawalsTabComparison.tsx
@@ -1,22 +1,14 @@
 import { useTranslation } from "next-i18next"
-import {
-  ListItem,
-  Tab,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Tabs,
-  UnorderedList,
-} from "@chakra-ui/react"
 
-import { ButtonLink } from "@/components/Buttons"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 import WithdrawalCredentials from "@/components/Staking/WithdrawalCredentials"
 import Translation from "@/components/Translation"
+import { ListItem, UnorderedList } from "@/components/ui/list"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
+import { ButtonLink } from "../ui/buttons/Button"
+
 const WithdrawalsTabComparison = () => {
   const { t } = useTranslation("page-staking")
   const handleMatomoEvent = (name: string): void => {
@@ -28,50 +20,53 @@ const WithdrawalsTabComparison = () => {
   }
 
   return (
-    <Tabs>
-      <TabList>
-        <Tab onClick={() => handleMatomoEvent("Current stakers")}>
+    <Tabs defaultValue="current">
+      <TabsList className="p-0">
+        <TabsTrigger
+          value="current"
+          onClick={() => handleMatomoEvent("Current stakers")}
+        >
           {t("comp-withdrawal-comparison-current-title")}
-        </Tab>
-        <Tab onClick={() => handleMatomoEvent("New stakers")}>
+        </TabsTrigger>
+        <TabsTrigger
+          value="new"
+          onClick={() => handleMatomoEvent("New stakers")}
+        >
           {t("comp-withdrawal-comparison-new-title")}
-        </Tab>
-      </TabList>
+        </TabsTrigger>
+      </TabsList>
 
-      <TabPanels>
-        <TabPanel>
-          <OldHeading as="h3">
-            {t("comp-withdrawal-comparison-current-title")}
-          </OldHeading>
-          <UnorderedList>
-            <ListItem>
-              <Translation id="page-staking:comp-withdrawal-comparison-current-li-1" />{" "}
-            </ListItem>
-            <ListItem>
-              <Translation id="page-staking:comp-withdrawal-comparison-current-li-2" />
-            </ListItem>
-          </UnorderedList>
-          <Text fontWeight="bold">
-            <Translation id="page-staking:comp-withdrawal-comparison-current-p" />
-          </Text>
+      <TabsContent
+        value="current"
+        className="space-y-4 bg-background-highlight"
+      >
+        <h3>{t("comp-withdrawal-comparison-current-title")}</h3>
+        <UnorderedList>
+          <ListItem>
+            <Translation id="page-staking:comp-withdrawal-comparison-current-li-1" />{" "}
+          </ListItem>
+          <ListItem>
+            <Translation id="page-staking:comp-withdrawal-comparison-current-li-2" />
+          </ListItem>
+        </UnorderedList>
+        <p className="font-bold">
+          <Translation id="page-staking:comp-withdrawal-comparison-current-p" />
+        </p>
 
-          <WithdrawalCredentials />
-        </TabPanel>
+        <WithdrawalCredentials />
+      </TabsContent>
 
-        <TabPanel>
-          <OldHeading as="h3">
-            {t("comp-withdrawal-comparison-new-title")}
-          </OldHeading>
-          <UnorderedList>
-            <ListItem>{t("comp-withdrawal-comparison-new-li-1")}</ListItem>
-            <ListItem>{t("comp-withdrawal-comparison-new-li-2")}</ListItem>
-          </UnorderedList>
-          <Text fontWeight="bold">{t("comp-withdrawal-comparison-new-p")}</Text>
-          <ButtonLink href="https://launchpad.ethereum.org/" hideArrow>
-            {t("comp-withdrawal-comparison-new-link")}
-          </ButtonLink>
-        </TabPanel>
-      </TabPanels>
+      <TabsContent value="new" className="space-y-4 bg-background-highlight">
+        <h3>{t("comp-withdrawal-comparison-new-title")}</h3>
+        <UnorderedList>
+          <ListItem>{t("comp-withdrawal-comparison-new-li-1")}</ListItem>
+          <ListItem>{t("comp-withdrawal-comparison-new-li-2")}</ListItem>
+        </UnorderedList>
+        <p className="font-bold">{t("comp-withdrawal-comparison-new-p")}</p>
+        <ButtonLink href="https://launchpad.ethereum.org/" hideArrow>
+          {t("comp-withdrawal-comparison-new-link")}
+        </ButtonLink>
+      </TabsContent>
     </Tabs>
   )
 }

diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-background-highlight p-1",
+      "inline-flex h-10 items-center justify-center rounded-md p-1",
       className
     )}
     {...props}