Merge pull request #14710 from JoeChenJ/Shadcn_Migrate_tutorials.tsx

Shadcn Migrate: developers/tutorials.tsx

Author: pettinarip

src/pages/developers/tutorials.tsx

@@ -1,34 +1,26 @@
-import { useEffect, useMemo, useState } from "react"
+import React, { HTMLAttributes, useEffect, useMemo, useState } from "react"
 import { GetStaticProps, InferGetServerSidePropsType } from "next"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
 import { FaGithub } from "react-icons/fa"
-import {
-  Badge,
-  Box,
-  chakra,
-  Flex,
-  forwardRef,
-  Heading,
-  useToken,
-} from "@chakra-ui/react"
+import { Badge, chakra, forwardRef } from "@chakra-ui/react"
 
 import { BasePageProps, Lang } from "@/lib/types"
 
-import { Button, ButtonLink } from "@/components/Buttons"
 import Emoji from "@/components/Emoji"
 import FeedbackCard from "@/components/FeedbackCard"
-import { BaseLink } from "@/components/Link"
+import Heading from "@/components/Heading"
 import MainArticle from "@/components/MainArticle"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
 import Translation from "@/components/Translation"
 import { getSkillTranslationId, Skill } from "@/components/TutorialMetadata"
 import TutorialTags from "@/components/TutorialTags"
+import { Button, ButtonLink } from "@/components/ui/buttons/Button"
 import Modal from "@/components/ui/dialog-modal"
+import { Flex, FlexProps } from "@/components/ui/flex"
 
+import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { trackCustomEvent } from "@/lib/utils/matomo"
@@ -43,7 +35,14 @@ import {
 import externalTutorials from "@/data/externalTutorials.json"
 
 import { useBreakpointValue } from "@/hooks/useBreakpointValue"
-import { useRtlFlip } from "@/hooks/useRtlFlip"
+
+type Props = BasePageProps & {
+  internalTutorials: ITutorial[]
+}
+
+type LinkFlexProps = FlexProps & {
+  href: string
+}
 
 const FilterTag = forwardRef<{ isActive: boolean; name: string }, "button">(
   (props, ref) => {
@@ -76,8 +75,16 @@ const FilterTag = forwardRef<{ isActive: boolean; name: string }, "button">(
   }
 )
 
-type Props = BasePageProps & {
-  internalTutorials: ITutorial[]
+const Text = ({ className, ...props }: HTMLAttributes<HTMLHeadElement>) => (
+  <p className={cn("mb-6", className)} {...props} />
+)
+
+const LinkFlex = ({ href, children, ...props }: LinkFlexProps) => {
+  return (
+    <Flex asChild {...props}>
+      <a href={href}>{children}</a>
+    </Flex>
+  )
 }
 
 export const getStaticProps = (async ({ locale }) => {
@@ -145,9 +152,6 @@ const TutorialPage = ({
   contentNotTranslated,
 }: InferGetServerSidePropsType<typeof getStaticProps>) => {
   const { locale } = useRouter()
-  const { flipForRtl } = useRtlFlip()
-  const tableBoxShadow = useToken("colors", "tableBoxShadow")
-  const cardBoxShadow = useToken("colors", "cardBoxShadow")
   const filteredTutorialsByLang = useMemo(
     () =>
       filterTutorialsByLang(
@@ -209,15 +213,8 @@ const TutorialPage = ({
 
   const modalSize = useBreakpointValue({ base: "xl", md: "md" } as const)
   return (
-    <Flex
-      as={MainArticle}
-      flexDirection="column"
-      alignItems="center"
-      w="full"
-      my={0}
-      mx="auto"
-      mt={16}
-      dir={dir}
+    <MainArticle
+      className={`mx-auto my-0 mt-16 flex w-full flex-col items-center ${dir}`}
     >
       <PageMetadata
         title={t("page-developers-tutorials:page-tutorials-meta-title")}
@@ -240,13 +237,7 @@ const TutorialPage = ({
       >
         <Translation id="page-developers-tutorials:page-tutorial-title" />
       </Heading>
-      <Text
-        fontSize="xl"
-        lineHeight="140%"
-        color="text200"
-        mb={4}
-        textAlign="center"
-      >
+      <Text className="mb-4 text-center leading-xs text-body-medium">
         <Translation id="page-developers-tutorials:page-tutorial-subtitle" />
       </Text>
 
@@ -262,48 +253,28 @@ const TutorialPage = ({
         <Text>
           <Translation id="page-developers-tutorials:page-tutorial-listing-policy-intro" />
         </Text>
-        <Flex flexDirection={{ base: "column", md: "row" }} gap="2">
-          <Flex
-            flex="1"
-            borderWidth="1px"
-            borderStyle="solid"
-            borderColor="border"
-            borderRadius="base"
-            p={4}
-            flexDirection="column"
-            justifyContent="space-between"
-          >
-            <Text as="b">
+        <Flex className="flex-col gap-2 md:flex-row">
+          <Flex className="w-full flex-col justify-between rounded-sm border border-border p-4">
+            <b>
               <Translation id="page-developers-tutorials:page-tutorial-create-an-issue" />
-            </Text>
+            </b>
             <Text>
               <Translation id="page-developers-tutorials:page-tutorial-create-an-issue-desc" />
             </Text>
             <ButtonLink
-              leftIcon={<FaGithub />}
               variant="outline"
               href="https://github.com/ethereum/ethereum-org-website/issues/new?assignees=&labels=Type%3A+Feature&template=suggest_tutorial.yaml&title="
             >
+              <FaGithub />
               <Translation id="page-developers-tutorials:page-tutorial-raise-issue-btn" />
             </ButtonLink>
           </Flex>
         </Flex>
       </Modal>
 
       <Button
+        className="px-3 py-2 text-body"
         variant="outline"
-        color="text"
-        borderColor="text"
-        _hover={{
-          color: "primary.base",
-          borderColor: "primary.base",
-          boxShadow: cardBoxShadow,
-        }}
-        _active={{
-          bg: "secondaryButtonBackgroundActive",
-        }}
-        py={2}
-        px={3}
         onClick={() => {
           setModalOpen(true)
           trackCustomEvent({
@@ -316,30 +287,9 @@ const TutorialPage = ({
         <Translation id="page-developers-tutorials:page-tutorial-submit-btn" />
       </Button>
 
-      <Box
-        boxShadow={tableBoxShadow}
-        mb={8}
-        mt={8}
-        w={{ base: "full", md: "66%" }}
-      >
-        <Flex
-          justifyContent="center"
-          m={8}
-          pb={{ base: 4, md: 8 }}
-          pt={{ base: 4, md: "initial" }}
-          px={{ base: 0, md: "initial" }}
-          borderBottomWidth="1px"
-          borderBottomStyle="solid"
-          borderBottomColor="border"
-          flexDirection={{ base: "column", md: "initial" }}
-        >
-          <Flex
-            flexWrap="wrap"
-            alignItems="center"
-            gap={2}
-            maxW={{ base: "full", md: "initial" }}
-            mb={{ base: 4, md: "initial" }}
-          >
+      <div className="my-8 w-full shadow-table-box md:w-2/3">
+        <Flex className="m-8 flex-col justify-center border-b border-border px-0 pb-4 pt-4 md:pb-8">
+          <Flex className="mb-4 max-w-full flex-wrap items-center gap-2">
             {Object.entries(allTags).map(([tagName, tagCount], idx) => {
               const name = `${tagName} (${tagCount})`
               const isActive = selectedTags.includes(tagName)
@@ -353,15 +303,8 @@ const TutorialPage = ({
             })}
             {selectedTags.length > 0 && (
               <Button
-                color="primary.base"
-                textDecoration="underline"
-                bg="none"
-                border="none"
-                cursor="pointer"
-                p={0}
-                _hover={{
-                  bg: "none",
-                }}
+                className="cursor-pointer p-0 text-primary underline"
+                variant="ghost"
                 onClick={() => {
                   setSelectedTags([])
                   trackCustomEvent({
@@ -377,69 +320,37 @@ const TutorialPage = ({
           </Flex>
         </Flex>
         {filteredTutorials.length === 0 && (
-          <Box mt={0} textAlign="center" padding={12}>
+          <div className="mt-0 p-12 text-center">
             <Emoji text=":crying_face:" className="my-8 text-5xl" />
-            <OldHeading>
+            <h2 className="mb-8 mt-12 leading-xs">
               <Translation id="page-developers-tutorials:page-tutorial-tags-error" />
-            </OldHeading>
+            </h2>
             <Text>
               <Translation id="page-developers-tutorials:page-find-wallet-try-removing" />
             </Text>
-          </Box>
+          </div>
         )}
         {filteredTutorials.map((tutorial) => {
           return (
-            <Flex
-              as={BaseLink}
-              textDecoration="none"
-              flexDirection="column"
-              justifyContent="space-between"
-              fontWeight="normal"
-              color="text"
-              boxShadow="0px 1px 1px var(--eth-colors-tableItemBoxShadow)"
-              mb="px"
-              padding={8}
-              w="full"
-              _hover={{
-                textDecoration: "none",
-                borderRadius: "base",
-                boxShadow: "0 0 1px var(--eth-colors-primary-base)",
-                bg: "tableBackgroundHover",
-              }}
+            <LinkFlex
+              className="mb-px w-full flex-col justify-between border-b p-8 text-border no-underline duration-100 hover:bg-background-highlight"
               key={tutorial.href}
               href={tutorial.href ?? undefined}
-              hideArrow
             >
-              <Flex
-                justifyContent="space-between"
-                mb={{ base: 8, md: -4 }}
-                alignItems="flex-start"
-                flexDirection={{ base: "column", md: "initial" }}
-              >
+              <Flex className="mb-8 flex-col items-start justify-between gap-y-4 md:-mb-4 md:flex-row">
                 <Text
-                  color="text"
-                  fontWeight="semibold"
-                  fontSize="2xl"
-                  me={{ base: 0, md: 24 }}
-                  _after={{
-                    ms: 0.5,
-                    me: "0.3rem",
-                    display: tutorial.isExternal ? "inline-block" : "none",
-                    content: `"↗"`,
-                    transform: flipForRtl,
-                    transitionProperty: "all",
-                    transitionDuration: "0.1s",
-                    transitionTimingFunction: "ease-in-out",
-                    fontStyle: "normal",
-                  }}
+                  className={cn(
+                    "relative me-0 text-2xl font-semibold text-body after:ml-2 after:inline-block after:italic after:transition-all after:duration-100 after:ease-in-out after:content-['↗'] md:me-24",
+                    tutorial.isExternal ? "after:inline-block" : "after:hidden"
+                  )}
                 >
                   {tutorial.title}
                 </Text>
                 <Badge variant="secondary">
                   <Translation id={getSkillTranslationId(tutorial.skill!)} />
                 </Badge>
               </Flex>
-              <Text color="text200" fontSize="sm" textTransform="uppercase">
+              <Text className="mt-6 uppercase text-body-medium">
                 <Emoji text=":writing_hand:" className="me-2 text-sm" />
                 {tutorial.author}
                 {tutorial.published ? (
@@ -458,22 +369,22 @@ const TutorialPage = ({
                   <>
                     {" "}
                     •<Emoji text=":link:" className="mx-2 text-sm" />
-                    <Box as="span" color="primary.base" cursor="pointer">
+                    <span className="cursor-pointer text-primary">
                       <Translation id="page-developers-tutorials:page-tutorial-external-link" />
-                    </Box>
+                    </span>
                   </>
                 )}
               </Text>
-              <Text color="text200">{tutorial.description}</Text>
-              <Flex flexWrap="wrap" w="full">
+              <Text className="text-body-medium">{tutorial.description}</Text>
+              <Flex className="w-full flex-wrap">
                 <TutorialTags tags={tutorial.tags ?? []} />
               </Flex>
-            </Flex>
+            </LinkFlex>
           )
         })}
-      </Box>
+      </div>
       <FeedbackCard />
-    </Flex>
+    </MainArticle>
   )
 }