Merge pull request #13984 from ethereum/shadcn-tab

Shadcn migration - tabs

Author: wackerow

package.json

@@ -47,6 +47,7 @@
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "@socialgouv/matomo-next": "^1.8.0",

src/components/Tabs.tsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils/cn"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-background-highlight p-1",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-t border-b border-b-primary px-4 py-1.5 ring-offset-background transition-all focus-visible:outline focus-visible:outline-4 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary data-[state=active]:text-body-inverse",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-4 rounded-lg border p-6 ring-offset-background focus-visible:outline focus-visible:outline-4 focus-visible:-outline-offset-1 focus-visible:outline-primary-hover",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsContent, TabsList, TabsTrigger }

src/components/ui/tabs.tsx

@@ -2,7 +2,6 @@ import type { GetStaticProps, InferGetStaticPropsType } from "next/types"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import type { ReactNode } from "react"
-import { useBreakpointValue } from "@chakra-ui/react"
 
 import type { BasePageProps, ChildOnlyProp, Lang } from "@/lib/types"
 
@@ -38,6 +37,7 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 import { getLocaleTimestamp } from "@/lib/utils/time"
 import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 import uniswap from "@/public/images/dapps/uni.png"
 import dapps from "@/public/images/doge-computer.png"
 import oneinch from "@/public/images/exchanges/1inch.png"
@@ -104,6 +104,12 @@ const GetEthPage = ({
 }: InferGetStaticPropsType<typeof getStaticProps>) => {
   const { t } = useTranslation("page-get-eth")
 
+  const walletImageWidth = useBreakpointValue({
+    base: "full",
+    sm: "60%",
+    md: "50%",
+  })
+
   const tokenSwaps: CardListItem[] = [
     {
       title: "Uniswap",
@@ -144,12 +150,6 @@ const GetEthPage = ({
     },
   ]
 
-  const walletImageWidth = useBreakpointValue({
-    base: "full",
-    sm: "60%",
-    md: "50%",
-  })
-
   return (
     <MainArticle>
       <Stack className="gap-16 p-8">

src/pages/get-eth.tsx

@@ -30,7 +30,6 @@ import MainArticle from "@/components/MainArticle"
 import PageMetadata from "@/components/PageMetadata"
 import { StandaloneQuizWidget } from "@/components/Quiz/QuizWidget"
 import StatErrorMessage from "@/components/StatErrorMessage"
-import Tabs from "@/components/Tabs"
 import Tooltip from "@/components/Tooltip"
 import Translation from "@/components/Translation"
 import { Button, ButtonLink } from "@/components/ui/buttons/Button"
@@ -42,6 +41,7 @@ import {
   SwiperNavigation,
   SwiperSlide,
 } from "@/components/ui/swiper"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
 import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
@@ -288,7 +288,7 @@ const WhatIsEthereumPage = ({
         </Stack>
       ),
     },
-  ]
+  ] as const
 
   const slides = [
     { eventName: "Payments slide" },
@@ -383,15 +383,28 @@ const WhatIsEthereumPage = ({
                 <TwoColumnContent>
                   <Width60>
                     <Tabs
-                      onTabClick={(index) => {
+                      defaultValue="0"
+                      onValueChange={(index) => {
                         trackCustomEvent({
                           eventCategory: `Blockchain/crypto tab`,
                           eventAction: `Clicked`,
                           eventName: tabs[index].eventName,
                         })
                       }}
-                      tabs={tabs}
-                    />
+                    >
+                      <TabsList>
+                        {tabs.map((tab, index) => (
+                          <TabsTrigger key={index} value={index.toString()}>
+                            {tab.title}
+                          </TabsTrigger>
+                        ))}
+                      </TabsList>
+                      {tabs.map((tab, index) => (
+                        <TabsContent key={index} value={index.toString()}>
+                          {tab.content}
+                        </TabsContent>
+                      ))}
+                    </Tabs>
                   </Width60>
                   <Width40 />
                 </TwoColumnContent>

src/pages/what-is-ethereum.tsx

@@ -4187,6 +4187,20 @@
     "@radix-ui/react-use-previous" "1.1.0"
     "@radix-ui/react-use-size" "1.1.0"
 
+"@radix-ui/react-tabs@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-tabs/-/react-tabs-1.1.0.tgz#0a6db1caed56776a1176aae68532060e301cc1c0"
+  integrity sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==
+  dependencies:
+    "@radix-ui/primitive" "1.1.0"
+    "@radix-ui/react-context" "1.1.0"
+    "@radix-ui/react-direction" "1.1.0"
+    "@radix-ui/react-id" "1.1.0"
+    "@radix-ui/react-presence" "1.1.0"
+    "@radix-ui/react-primitive" "2.0.0"
+    "@radix-ui/react-roving-focus" "1.1.0"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+
 "@radix-ui/react-tooltip@^1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.2.tgz#c42db2ffd7dcc6ff3d65407c8cb70490288f518d"