Shadcn Migrate: contributing/translation-program/contributors.tsx

Author: JoeChenJ

src/pages/contributing/translation-program/contributors.tsx

@@ -1,27 +1,19 @@
+import { BaseHTMLAttributes } from "react"
 import { useRouter } from "next/router"
 import { GetStaticProps } from "next/types"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import {
-  Box,
-  BoxProps,
-  Flex,
-  HeadingProps,
-  ListItem,
-  SimpleGrid,
-  UnorderedList,
-} from "@chakra-ui/react"
 
 import { BasePageProps, CostLeaderboardData, Lang } from "@/lib/types"
 
 import Breadcrumbs from "@/components/Breadcrumbs"
 import FeedbackCard from "@/components/FeedbackCard"
-import InlineLink from "@/components/Link"
-import MainArticle from "@/components/MainArticle"
-import OldHeading from "@/components/OldHeading"
-import Text from "@/components/OldText"
 import PageMetadata from "@/components/PageMetadata"
+import { Flex } from "@/components/ui/flex"
+import InlineLink from "@/components/ui/Link"
+import { List, ListItem } from "@/components/ui/list"
 
+import { cn } from "@/lib/utils/cn"
 import { existsNamespace } from "@/lib/utils/existsNamespace"
 import { getLastDeployDate } from "@/lib/utils/getLastDeployDate"
 import { getLocaleTimestamp } from "@/lib/utils/time"
@@ -51,11 +43,15 @@ export const getStaticProps = (async ({ locale }) => {
   }
 }) satisfies GetStaticProps<BasePageProps>
 
-const Content = (props: BoxProps) => (
-  <Box as={MainArticle} py={4} px={10} w="full" {...props} />
+const Content = (props: { children: React.ReactNode }) => (
+  <div className="w-full px-10 py-4">{props.children}</div>
 )
-const ContentHeading = (props: HeadingProps) => (
-  <OldHeading lineHeight={1.4} {...props} />
+
+const Text = ({
+  className,
+  ...props
+}: BaseHTMLAttributes<HTMLHeadingElement>) => (
+  <p className={cn("mb-[1.45rem] leading-base", className)} {...props} />
 )
 
 const Contributors = () => {
@@ -69,7 +65,7 @@ const Contributors = () => {
     .filter((item) => item.length > 0)
 
   return (
-    <Flex direction="column" align="center" w="full">
+    <Flex className="w-full flex-col items-center">
       <PageMetadata
         title={t(
           "page-contributing-translation-program-contributors-meta-title"
@@ -81,25 +77,17 @@ const Contributors = () => {
 
       <Content>
         <Breadcrumbs slug={router.asPath} className="mt-12" />
-        <ContentHeading
-          as="h1"
-          fontSize={{ base: "2.5rem", md: "5xl" }}
-          fontWeight={700}
-        >
+        <h1 className="my-8 text-[2.5rem] font-bold leading-xs md:text-5xl">
           {t("page-contributing-translation-program-contributors-title")}
-        </ContentHeading>
-        <ContentHeading
-          as="h4"
-          fontSize={{ base: "md", md: "xl" }}
-          fontWeight={500}
-        >
-          <Text as="strong">
+        </h1>
+        <h4 className="my-8 text-md font-medium leading-xs md:text-xl">
+          <Text className="mb-0 font-bold">
             {t(
               "page-contributing-translation-program-contributors-number-of-contributors"
             )}{" "}
             {translators.length}
           </Text>
-        </ContentHeading>
+        </h4>
         <Text>
           {t(
             "page-contributing-translation-program-contributors-our-translators-1"
@@ -122,24 +110,23 @@ const Contributors = () => {
           </InlineLink>
           .
         </Text>
-        <ContentHeading
-          as="h2"
-          fontSize={{ base: "2xl", md: "2rem" }}
-          fontWeight={600}
-        >
+        <h2 className="my-8 text-2xl font-semibold leading-xs md:text-[2rem]">
           {t("page-contributing-translation-program-contributors-thank-you")}
-        </ContentHeading>
-        <SimpleGrid as={UnorderedList} columns={[1, 2, 3, 4, 6]} ms="1.45rem">
+        </h2>
+        <List className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6">
           {translators
             .sort((user1, user2) =>
               user1.toLowerCase().localeCompare(user2.toLowerCase())
             )
             .map((user) => (
-              <ListItem key={user} color="text300">
+              <ListItem
+                key={user}
+                className="text-[#4c4c4c] dark:text-[#cccccc]"
+              >
                 {user}
               </ListItem>
             ))}
-        </SimpleGrid>
+        </List>
         <Text>
           {t("common:page-languages-interested")}{" "}
           <InlineLink href="/contributing/translation-program/">