From 53043ecef2fa0f2fa0dc3f44b2503ada3ba32174 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Thu, 3 Oct 2024 13:48:22 +0530
Subject: [PATCH 1/4] feat: migrate DocsNav to tailwind

---
 src/components/DocsNav.tsx | 106 ++++++++++++++-----------------------
 1 file changed, 39 insertions(+), 67 deletions(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index 62ee9b5ad2f..d3e639021ae 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -1,41 +1,30 @@
 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 { Flex, Stack } from "./ui/flex"
+import { BaseLink } from "./ui/Link"
+
 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,22 +42,24 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
   const { t } = useTranslation("page-developers-docs")
   const { isRtl } = useRtlFlip()
 
-  const xPadding = isPrev ? { ps: "0" } : { pe: 0 }
+  const xPaddingClass = 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"}
+    <BaseLink
+      href={docData.href}
+      className={cn(
+        "flex w-full flex-1 items-center no-underline",
+        "h-[82px] rounded-[1px] border bg-background",
+        isPrev ? "justify-start" : "justify-end"
+      )}
+      rel={isPrev ? "prev" : "next"}
+      customEventOptions={{
+        eventCategory: "next/previous article DocsNav",
+        eventAction: "click",
+        eventName: isPrev ? "previous" : "next",
+      }}
     >
-      <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(
@@ -76,28 +67,15 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
             !contentNotTranslated && isRtl ? "-scale-x-100" : ""
           )}
         />
-      </Box>
-      <TextDiv {...xPadding} {...(!isPrev && { textAlign: "end" })}>
-        <Text textTransform="uppercase" m="0">
-          {t(isPrev ? "previous" : "next")}
-        </Text>
-        <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",
-            })
-          }}
-        >
+      </div>
+      <TextDiv className={cn(xPaddingClass, !isPrev ? "text-end" : "")}>
+        <p className="uppercase text-body">{t(isPrev ? "previous" : "next")}</p>
+
+        <p className={cn("underline", isPrev ? "text-start" : "text-end")}>
           {t(docData.id)}
-        </LinkOverlay>
+        </p>
       </TextDiv>
-    </LinkBox>
+    </BaseLink>
   )
 }
 
@@ -146,18 +124,12 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
 
   return (
     <Flex
-      as="nav"
+      className={cn(
+        "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,7 +138,7 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
           isPrev
         />
       ) : (
-        <Spacer />
+        <div className="hidden flex-grow xl:block"></div>
       )}
       {nextDoc ? (
         <CardLink
@@ -174,7 +146,7 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
           contentNotTranslated={contentNotTranslated}
         />
       ) : (
-        <Spacer />
+        <div className="hidden flex-grow xl:block"></div>
       )}
     </Flex>
   )

From a093da15a4bc1c8be428f615f2e2a9ab6f38c111 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Wed, 9 Oct 2024 11:16:00 +0530
Subject: [PATCH 2/4] chore: update with suggested changes

---
 src/components/DocsNav.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index d3e639021ae..764c30f0320 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -42,14 +42,12 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
   const { t } = useTranslation("page-developers-docs")
   const { isRtl } = useRtlFlip()
 
-  const xPaddingClass = isPrev ? "ps-0" : "pe-0"
-
   return (
     <BaseLink
       href={docData.href}
       className={cn(
         "flex w-full flex-1 items-center no-underline",
-        "h-[82px] rounded-[1px] border bg-background",
+        "h-[82px] rounded-sm border bg-background",
         isPrev ? "justify-start" : "justify-end"
       )}
       rel={isPrev ? "prev" : "next"}
@@ -68,7 +66,7 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
           )}
         />
       </div>
-      <TextDiv className={cn(xPaddingClass, !isPrev ? "text-end" : "")}>
+      <TextDiv className={cn(!isPrev ? "pe-0 text-end" : "ps-0")}>
         <p className="uppercase text-body">{t(isPrev ? "previous" : "next")}</p>
 
         <p className={cn("underline", isPrev ? "text-start" : "text-end")}>

From 410df970069b252914b1db169247ac47b70e7c01 Mon Sep 17 00:00:00 2001
From: saurabhburade <sburade3@gmail.com>
Date: Wed, 9 Oct 2024 11:21:53 +0530
Subject: [PATCH 3/4] chore: refactor with LinkBox & LinkOverlay

---
 src/components/DocsNav.tsx | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index 764c30f0320..9f4ded86b49 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -7,11 +7,12 @@ import type { DeveloperDocsLink } from "@/lib/interfaces"
 import Emoji from "@/components/Emoji"
 
 import { cn } from "@/lib/utils/cn"
+import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import docLinks from "@/data/developer-docs-links.yaml"
 
 import { Flex, Stack } from "./ui/flex"
-import { BaseLink } from "./ui/Link"
+import { LinkBox, LinkOverlay } from "./ui/link-box"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
@@ -43,19 +44,12 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
   const { isRtl } = useRtlFlip()
 
   return (
-    <BaseLink
-      href={docData.href}
+    <LinkBox
       className={cn(
         "flex w-full flex-1 items-center no-underline",
         "h-[82px] rounded-sm border bg-background",
         isPrev ? "justify-start" : "justify-end"
       )}
-      rel={isPrev ? "prev" : "next"}
-      customEventOptions={{
-        eventCategory: "next/previous article DocsNav",
-        eventAction: "click",
-        eventName: isPrev ? "previous" : "next",
-      }}
     >
       <div className={cn("h-full p-4", isPrev ? "order-[0]" : "order-1")}>
         <Emoji
@@ -68,12 +62,22 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
       </div>
       <TextDiv className={cn(!isPrev ? "pe-0 text-end" : "ps-0")}>
         <p className="uppercase text-body">{t(isPrev ? "previous" : "next")}</p>
-
-        <p className={cn("underline", isPrev ? "text-start" : "text-end")}>
+        <LinkOverlay
+          href={docData.href}
+          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)}
-        </p>
+        </LinkOverlay>
       </TextDiv>
-    </BaseLink>
+    </LinkBox>
   )
 }
 

From 26f2e05d3729fbf15332afcf05f847bf2dc0c668 Mon Sep 17 00:00:00 2001
From: Pablo Pettinari <pettinarip@gmail.com>
Date: Wed, 16 Oct 2024 13:18:51 +0200
Subject: [PATCH 4/4] use nav for semantics

---
 src/components/DocsNav.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index 9f4ded86b49..6465116d450 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -11,7 +11,7 @@ import { trackCustomEvent } from "@/lib/utils/matomo"
 
 import docLinks from "@/data/developer-docs-links.yaml"
 
-import { Flex, Stack } from "./ui/flex"
+import { Stack } from "./ui/flex"
 import { LinkBox, LinkOverlay } from "./ui/link-box"
 
 import { useRtlFlip } from "@/hooks/useRtlFlip"
@@ -125,9 +125,9 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
     currentIndex + 1 < docsArray.length ? docsArray[currentIndex + 1] : null
 
   return (
-    <Flex
+    <nav
       className={cn(
-        "flex-col-reverse md:flex-row lg:flex-col-reverse xl:flex-row",
+        "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"
       )}
@@ -150,7 +150,7 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
       ) : (
         <div className="hidden flex-grow xl:block"></div>
       )}
-    </Flex>
+    </nav>
   )
 }