Shadcn Migration - DocsNav

src/components/DocsNav.tsx

@@ -1,41 +1,31 @@
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
-import {
-  Box,
-  Flex,
-  FlexProps,
-  LinkBox,
-  LinkOverlay,
-  Spacer,
-} from "@chakra-ui/react"
 
 import { TranslationKey } from "@/lib/types"
 import type { DeveloperDocsLink } from "@/lib/interfaces"
 
 import Emoji from "@/components/Emoji"
-import { BaseLink } from "@/components/Link"
-import Text from "@/components/OldText"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import docLinks from "@/data/developer-docs-links.yaml"
 
+import { Stack } from "./ui/flex"
+import { LinkBox, LinkOverlay } from "./ui/link-box"
+
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
-const TextDiv = ({ children, ...props }: FlexProps) => (
-  <Flex
-    direction="column"
-    justify="space-between"
-    maxW="166px"
-    h="100%"
-    wordwrap="break-word"
-    p={4}
-    lineHeight={4}
+const TextDiv = ({ children, className, ...props }) => (
+  <Stack
+    className={cn(
+      "h-full max-w-[166px] justify-between gap-0 break-words p-4",
+      className
+    )}
     {...props}
   >
     {children}
-  </Flex>
+  </Stack>
 )
 
 type DocsArrayProps = {
@@ -53,46 +43,36 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
   const { t } = useTranslation("page-developers-docs")
   const { isRtl } = useRtlFlip()
 
-  const xPadding = isPrev ? { ps: "0" } : { pe: 0 }
-
   return (
     <LinkBox
-      as={Flex}
-      alignItems="center"
-      w="full"
-      flex="1"
-      h="82px"
-      bg="background.base"
-      border="1px"
-      borderColor="border"
-      borderRadius={1}
-      justify={isPrev ? "flex-start" : "flex-end"}
+      className={cn(
+        "flex w-full flex-1 items-center no-underline",
+        "h-[82px] rounded-sm border bg-background",
+        isPrev ? "justify-start" : "justify-end"
+      )}
     >
-      <Box textDecoration="none" p={4} h="100%" order={isPrev ? 0 : 1}>
+      <div className={cn("h-full p-4", isPrev ? "order-[0]" : "order-1")}>
         <Emoji
           text={isPrev ? ":point_left:" : ":point_right:"}
           className={cn(
             "text-5xl",
             !contentNotTranslated && isRtl ? "-scale-x-100" : ""
           )}
         />
-      </Box>
-      <TextDiv {...xPadding} {...(!isPrev && { textAlign: "end" })}>
-        <Text textTransform="uppercase" m="0">
-          {t(isPrev ? "previous" : "next")}
-        </Text>
+      </div>
+      <TextDiv className={cn(!isPrev ? "pe-0 text-end" : "ps-0")}>
+        <p className="uppercase text-body">{t(isPrev ? "previous" : "next")}</p>
         <LinkOverlay
-          as={BaseLink}
           href={docData.href}
-          textAlign={isPrev ? "start" : "end"}
-          rel={isPrev ? "prev" : "next"}
           onClick={() => {
             trackCustomEvent({
               eventCategory: "next/previous article DocsNav",
               eventAction: "click",
               eventName: isPrev ? "previous" : "next",
             })
           }}
+          className={cn("underline", isPrev ? "text-start" : "text-end")}
+          rel={isPrev ? "prev" : "next"}
         >
           {t(docData.id)}
         </LinkOverlay>
@@ -145,19 +125,13 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
     currentIndex + 1 < docsArray.length ? docsArray[currentIndex + 1] : null
 
   return (
-    <Flex
-      as="nav"
+    <nav
+      className={cn(
+        "flex flex-col-reverse md:flex-row lg:flex-col-reverse xl:flex-row",
+        "mt-8 justify-between gap-4",
+        "items-center md:items-start"
+      )}
       aria-label="Paginate to document"
-      direction={{
-        base: "column-reverse",
-        md: "row",
-        lg: "column-reverse",
-        xl: "row",
-      }}
-      mt="8"
-      gap="4"
-      justify="space-between"
-      alignItems={{ base: "center", md: "flex-start" }}
     >
       {previousDoc ? (
         <CardLink
@@ -166,17 +140,17 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
           isPrev
         />
       ) : (
-        <Spacer />
+        <div className="hidden flex-grow xl:block"></div>
       )}
       {nextDoc ? (
         <CardLink
           docData={nextDoc}
           contentNotTranslated={contentNotTranslated}
         />
       ) : (
-        <Spacer />
+        <div className="hidden flex-grow xl:block"></div>
       )}
-    </Flex>
+    </nav>
   )
 }