Migrate Leaderboard.tsx to Shadcn

Author: JoeChenJ

src/components/Leaderboard.tsx

@@ -1,21 +1,16 @@
 import { useTranslation } from "next-i18next"
-import {
-  Avatar,
-  Box,
-  Flex,
-  LinkBox,
-  LinkOverlay,
-  List,
-  ListItem,
-  useColorModeValue,
-  VisuallyHidden,
-} from "@chakra-ui/react"
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden"
 
 import Emoji from "@/components/Emoji"
-import { BaseLink } from "@/components/Link"
 
 import { GITHUB_URL } from "@/lib/constants"
 
+import { Avatar } from "./ui/avatar"
+import { Flex } from "./ui/flex"
+import { LinkBox } from "./ui/link-box"
+import { LinkOverlay } from "./ui/link-box"
+import { List, ListItem } from "./ui/list"
+
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 type Person = {
@@ -30,29 +25,12 @@ type LeaderboardProps = {
 }
 
 const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
-  const { flipForRtl } = useRtlFlip()
-  const colorModeStyles = useColorModeValue(
-    {
-      listBoxShadow: "tableBox.light",
-      linkBoxShadow: "tableItemBox.light",
-      scoreColor: "blackAlpha.700",
-    },
-    {
-      listBoxShadow: "tableBox.dark",
-      linkBoxShadow: "tableItemBox.dark",
-      scoreColor: "whiteAlpha.600",
-    }
-  )
-
+  const { twFlipForRtl } = useRtlFlip()
   const { t } = useTranslation("page-bug-bounty")
 
   return (
     <List
-      bgColor="background.base"
-      boxShadow={colorModeStyles.listBoxShadow}
-      w="100%"
-      mb={8}
-      ms={0}
+      className="mb-8 ms-0 w-full list-none bg-background shadow-table-box"
       aria-label={t("page-upgrades-bug-bounty-leaderboard-list")}
     >
       {content
@@ -72,41 +50,22 @@ const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
           }
 
           return (
-            <ListItem key={username} mb={0}>
+            <ListItem className="mb-0" key={username}>
               <LinkBox
+                className="mb-1 flex w-full items-center justify-between p-4 shadow-table-item-box hover:rounded-lg hover:bg-background-highlight hover:no-underline hover:shadow-primary"
                 key={idx}
-                display="flex"
-                justifyContent="space-between"
-                alignItems="center"
-                boxShadow={colorModeStyles.linkBoxShadow}
-                mb={0.25}
-                p={4}
-                w="100%"
-                _hover={{
-                  textDecor: "none",
-                  borderRadius: 0.5,
-                  boxShadow: "0 0 1px var(--eth-colors-primary-base)",
-                  background: "tableBackgroundHover",
-                }}
               >
-                <Box me={4} opacity="0.4">
-                  {idx + 1}
-                </Box>
+                <div className="me-4 opacity-40">{idx + 1}</div>
                 <Avatar
+                  className="me-4 flex h-10 w-10 flex-wrap sm:block"
+                  href={avatarImg}
                   src={avatarImg}
                   name={avatarAlt}
-                  me={4}
-                  h={10}
-                  w={10}
-                  display={{ base: "none", xs: "block" }}
                 />
-                <Flex flex="1 1 75%" direction="column" me={8}>
+                <Flex className="me-8 flex-1 basis-3/4 flex-col">
                   <LinkOverlay
-                    as={BaseLink}
+                    className="text-body no-underline"
                     href={hasGitHub ? `${GITHUB_URL}${username}` : "#"}
-                    textDecor="none"
-                    color="text"
-                    hideArrow
                   >
                     <VisuallyHidden>{`In place number ${
                       idx + 1
@@ -117,20 +76,13 @@ const Leaderboard = ({ content, limit = 100 }: LeaderboardProps) => {
                     )}
                   </LinkOverlay>
 
-                  <Box fontSize="sm" color={colorModeStyles.scoreColor}>
+                  <div className="text-sm text-body-medium">
                     {score} {t("page-upgrades-bug-bounty-leaderboard-points")}
-                  </Box>
+                  </div>
                 </Flex>
                 {emoji && <Emoji className="me-8 text-2xl" text={emoji} />}
-                <Box
-                  as="span"
-                  _after={{
-                    content: '"↗"',
-                    ms: 0.5,
-                    me: 1.5,
-                    transform: flipForRtl,
-                    display: "inline-block",
-                  }}
+                <span
+                  className={`after:me-1.5 after:ms-0.5 after:content-['↗'] after:${twFlipForRtl} after:inline-block`}
                 />
               </LinkBox>
             </ListItem>