From bf0cd33f45ca40dedeab7af9df702dad1431f36c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=97=9C=20=E2=80=B8=20=E1=97=9C?=
 <57232813+iusx@users.noreply.github.com>
Date: Sun, 2 Feb 2025 14:29:42 +0800
Subject: [PATCH 1/9] fix: #13405 and end #13523 use shadcn

---
 src/components/DocsNav.tsx | 90 ++++++++++++++++----------------------
 1 file changed, 38 insertions(+), 52 deletions(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index 6465116d450..f5ef492a3d4 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -1,31 +1,27 @@
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
+import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 
-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, className, ...props }) => (
-  <Stack
+  <div
     className={cn(
-      "h-full max-w-[166px] justify-between gap-0 break-words p-4",
+      "flex h-full w-full flex-col justify-center justify-between break-words p-4",
       className
     )}
     {...props}
   >
     {children}
-  </Stack>
+  </div>
 )
 
 type DocsArrayProps = {
@@ -41,43 +37,42 @@ type CardLinkProps = {
 
 const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
   const { t } = useTranslation("page-developers-docs")
-  const { isRtl } = useRtlFlip()
+  const { flipForRtl } = useRtlFlip()
 
   return (
-    <LinkBox
+    <BaseLink
+      href={docData.href}
       className={cn(
-        "flex w-full flex-1 items-center no-underline",
-        "h-[82px] rounded-sm border bg-background",
-        isPrev ? "justify-start" : "justify-end"
+        "flex w-full items-start items-center rounded-sm border border-primary bg-background !no-underline",
+        isPrev ? "justify-start" : "justify-end",
+        "hover:border-primary-hover hover:[&_.btn-txt]:text-primary-hover hover:[&_svg]:fill-primary-hover"
       )}
+      rel={isPrev ? "prev" : "next"}
+      onClick={() => {
+        trackCustomEvent({
+          eventCategory: "next/previous article DocsNav",
+          eventAction: "click",
+          eventName: isPrev ? "previous" : "next",
+        })
+      }}
     >
-      <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" : ""
-          )}
-        />
+      <div
+        className={cn("p-4", isPrev ? "order-0" : "order-1")}
+        style={{ transform: contentNotTranslated ? undefined : flipForRtl }}
+      >
+        {isPrev ? (
+          <FaChevronLeft className="fill-primary text-xl" />
+        ) : (
+          <FaChevronRight className="fill-primary text-xl" />
+        )}
       </div>
-      <TextDiv className={cn(!isPrev ? "pe-0 text-end" : "ps-0")}>
-        <p className="uppercase text-body">{t(isPrev ? "previous" : "next")}</p>
-        <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)}
-        </LinkOverlay>
+      <TextDiv className={cn(isPrev ? "ps-0" : "pe-0 text-end")}>
+        <Text className="btn-txt !m-0 text-lg text-primary">
+          {t(isPrev ? "previous" : "next")}
+        </Text>
+        <Text className="!mb-0 text-sm no-underline">{t(docData.id)}</Text>
       </TextDiv>
-    </LinkBox>
+    </BaseLink>
   )
 }
 
@@ -87,28 +82,20 @@ type DocsNavProps = {
 
 const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
   const { asPath } = useRouter()
-  // Construct array of all linkable documents in order recursively
   const docsArray: DocsArrayProps[] = []
   const getDocs = (links: Array<DeveloperDocsLink>): void => {
     for (const item of links) {
-      // If object has 'items' key
       if (item.items) {
-        // And if item has a 'to' key
-        // Add 'to' path and 'id' to docsArray
         item.href && docsArray.push({ href: item.href, id: item.id })
-        // Then recursively add sub-items
         getDocs(item.items)
       } else {
-        // If object has no further 'items', add and continue
         docsArray.push({ href: item.href, id: item.id })
       }
     }
   }
 
-  // Initiate recursive loop with full docLinks yaml
   getDocs(docLinks)
 
-  // Find index that matches current page
   let currentIndex = 0
   for (let i = 0; i < docsArray.length; i++) {
     if (
@@ -119,7 +106,6 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
     }
   }
 
-  // Extract previous and next doc based on current index +/- 1
   const previousDoc = currentIndex - 1 >= 0 ? docsArray[currentIndex - 1] : null
   const nextDoc =
     currentIndex + 1 < docsArray.length ? docsArray[currentIndex + 1] : null
@@ -129,7 +115,7 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
       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"
+        "items-stretch"
       )}
       aria-label="Paginate to document"
     >
@@ -140,7 +126,7 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
           isPrev
         />
       ) : (
-        <div className="hidden flex-grow xl:block"></div>
+        <div className="hidden flex-grow xl:block" />
       )}
       {nextDoc ? (
         <CardLink
@@ -148,7 +134,7 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
           contentNotTranslated={contentNotTranslated}
         />
       ) : (
-        <div className="hidden flex-grow xl:block"></div>
+        <div className="hidden flex-grow xl:block" />
       )}
     </nav>
   )

From ae36386819228ddc9d05d851b8268086e8fcb1ce Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=97=9C=20=E2=80=B8=20=E1=97=9C?=
 <57232813+iusx@users.noreply.github.com>
Date: Sun, 2 Feb 2025 14:32:20 +0800
Subject: [PATCH 2/9] fix: use justify-center

---
 src/components/DocsNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index f5ef492a3d4..2b901101e2e 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -15,7 +15,7 @@ import { useRtlFlip } from "@/hooks/useRtlFlip"
 const TextDiv = ({ children, className, ...props }) => (
   <div
     className={cn(
-      "flex h-full w-full flex-col justify-center justify-between break-words p-4",
+      "flex h-full w-full flex-col justify-center break-words p-4",
       className
     )}
     {...props}

From ba5c44391faae59cce8e530d978731331f148a03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=97=9C=20=E2=80=B8=20=E1=97=9C?=
 <57232813+iusx@users.noreply.github.com>
Date: Sun, 2 Feb 2025 15:20:48 +0800
Subject: [PATCH 3/9] fix: log error

---
 src/components/DocsNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index 2b901101e2e..4e1c1aacb12 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -26,7 +26,7 @@ const TextDiv = ({ children, className, ...props }) => (
 
 type DocsArrayProps = {
   href: string
-  id: TranslationKey
+  id: string
 }
 
 type CardLinkProps = {

From 399f42f8df91c9be0d6b029b4902823d4825a5e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=97=9C=20=E2=80=B8=20=E1=97=9C?=
 <57232813+iusx@users.noreply.github.com>
Date: Sun, 2 Feb 2025 15:25:26 +0800
Subject: [PATCH 4/9] fix: log error

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

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index 4e1c1aacb12..ec5808214be 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -2,6 +2,9 @@ import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
 
+import { TranslationKey } from "@/lib/types"
+import type { DeveloperDocsLink } from "@/lib/interfaces"
+
 import { BaseLink } from "@/components/Link"
 import Text from "@/components/OldText"
 
@@ -26,7 +29,7 @@ const TextDiv = ({ children, className, ...props }) => (
 
 type DocsArrayProps = {
   href: string
-  id: string
+  id: TranslationKey
 }
 
 type CardLinkProps = {

From b9417ad36cf4b5f166872955b22e38901c4b0f85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=97=9C=20=E2=80=B8=20=E1=97=9C?=
 <57232813+iusx@users.noreply.github.com>
Date: Sun, 2 Feb 2025 22:46:34 +0800
Subject: [PATCH 5/9] feat: use new components?

---
 src/components/DocsNav.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index ec5808214be..f430dac687d 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -1,12 +1,12 @@
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
+import { Text } from "@chakra-ui/react"
 
 import { TranslationKey } from "@/lib/types"
 import type { DeveloperDocsLink } from "@/lib/interfaces"
 
 import { BaseLink } from "@/components/Link"
-import Text from "@/components/OldText"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"
@@ -87,18 +87,25 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
   const { asPath } = useRouter()
   const docsArray: DocsArrayProps[] = []
   const getDocs = (links: Array<DeveloperDocsLink>): void => {
+    // If object has 'items' key
     for (const item of links) {
+      // And if item has a 'to' key
+      // Add 'to' path and 'id' to docsArray
       if (item.items) {
         item.href && docsArray.push({ href: item.href, id: item.id })
+        // Then recursively add sub-items
         getDocs(item.items)
       } else {
+        // If object has no further 'items', add and continue
         docsArray.push({ href: item.href, id: item.id })
       }
     }
   }
 
+  // Initiate recursive loop with full docLinks yaml
   getDocs(docLinks)
 
+  // Find index that matches current page
   let currentIndex = 0
   for (let i = 0; i < docsArray.length; i++) {
     if (
@@ -109,6 +116,7 @@ const DocsNav = ({ contentNotTranslated }: DocsNavProps) => {
     }
   }
 
+  // Extract previous and next doc based on current index +/- 1
   const previousDoc = currentIndex - 1 >= 0 ? docsArray[currentIndex - 1] : null
   const nextDoc =
     currentIndex + 1 < docsArray.length ? docsArray[currentIndex + 1] : null

From 5d649fd6e6db31066ef50b85aac99b2cabee6b12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=97=9C=20=E2=80=B8=20=E1=97=9C?=
 <57232813+iusx@users.noreply.github.com>
Date: Sun, 2 Feb 2025 22:55:07 +0800
Subject: [PATCH 6/9] fix: use @/components/ui/Link

---
 src/components/DocsNav.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index f430dac687d..fd21dcfc3db 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -6,7 +6,7 @@ import { Text } from "@chakra-ui/react"
 import { TranslationKey } from "@/lib/types"
 import type { DeveloperDocsLink } from "@/lib/interfaces"
 
-import { BaseLink } from "@/components/Link"
+import { BaseLink } from "@/components/ui/Link"
 
 import { cn } from "@/lib/utils/cn"
 import { trackCustomEvent } from "@/lib/utils/matomo"

From d302e072784b471f8a8c6573d7184f1b6ee2324c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=97=9C=20=E2=80=B8=20=E1=97=9C?=
 <57232813+iusx@users.noreply.github.com>
Date: Mon, 3 Feb 2025 00:13:55 +0800
Subject: [PATCH 7/9] fix: hover error

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

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index fd21dcfc3db..757bba5f111 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -46,9 +46,9 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
     <BaseLink
       href={docData.href}
       className={cn(
-        "flex w-full items-start items-center rounded-sm border border-primary bg-background !no-underline",
+        "group flex w-full items-center rounded-sm border border-primary bg-background !no-underline",
         isPrev ? "justify-start" : "justify-end",
-        "hover:border-primary-hover hover:[&_.btn-txt]:text-primary-hover hover:[&_svg]:fill-primary-hover"
+        "hover:border-primary-hover"
       )}
       rel={isPrev ? "prev" : "next"}
       onClick={() => {
@@ -64,13 +64,13 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
         style={{ transform: contentNotTranslated ? undefined : flipForRtl }}
       >
         {isPrev ? (
-          <FaChevronLeft className="fill-primary text-xl" />
+          <FaChevronLeft className="text-xl group-hover:fill-primary-hover" />
         ) : (
-          <FaChevronRight className="fill-primary text-xl" />
+          <FaChevronRight className="text-xl group-hover:fill-primary-hover" />
         )}
       </div>
       <TextDiv className={cn(isPrev ? "ps-0" : "pe-0 text-end")}>
-        <Text className="btn-txt !m-0 text-lg text-primary">
+        <Text className="btn-txt !m-0 text-lg text-primary group-hover:text-primary-hover">
           {t(isPrev ? "previous" : "next")}
         </Text>
         <Text className="!mb-0 text-sm no-underline">{t(docData.id)}</Text>

From de6dbb3b796ca102cb17cb5023863de8ad040b1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=97=9C=20=E2=80=B8=20=E1=97=9C?=
 <57232813+iusx@users.noreply.github.com>
Date: Tue, 11 Feb 2025 05:14:27 +0800
Subject: [PATCH 8/9] feat: del import { Text } from "@chakra-ui/react"

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

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index 757bba5f111..ae95889ca17 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -1,7 +1,6 @@
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { FaChevronLeft, FaChevronRight } from "react-icons/fa"
-import { Text } from "@chakra-ui/react"
 
 import { TranslationKey } from "@/lib/types"
 import type { DeveloperDocsLink } from "@/lib/interfaces"
@@ -70,10 +69,10 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
         )}
       </div>
       <TextDiv className={cn(isPrev ? "ps-0" : "pe-0 text-end")}>
-        <Text className="btn-txt !m-0 text-lg text-primary group-hover:text-primary-hover">
+        <p className="btn-txt !m-0 text-lg text-primary group-hover:text-primary-hover">
           {t(isPrev ? "previous" : "next")}
-        </Text>
-        <Text className="!mb-0 text-sm no-underline">{t(docData.id)}</Text>
+        </p>
+        <p className="!mb-0 text-sm no-underline">{t(docData.id)}</p>
       </TextDiv>
     </BaseLink>
   )

From b8ce23bdf55ee051781d47ccd97adf5797e12aa4 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Wed, 26 Feb 2025 19:41:53 +0100
Subject: [PATCH 9/9] refactor: use tsFlipForRtl

flipForRtl deprecated
---
 src/components/DocsNav.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/DocsNav.tsx b/src/components/DocsNav.tsx
index 83ab6c2678a..b580805ecab 100644
--- a/src/components/DocsNav.tsx
+++ b/src/components/DocsNav.tsx
@@ -39,7 +39,7 @@ type CardLinkProps = {
 
 const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
   const { t } = useTranslation("page-developers-docs")
-  const { flipForRtl } = useRtlFlip()
+  const { twFlipForRtl } = useRtlFlip()
 
   return (
     <BaseLink
@@ -59,8 +59,11 @@ const CardLink = ({ docData, isPrev, contentNotTranslated }: CardLinkProps) => {
       }}
     >
       <div
-        className={cn("p-4", isPrev ? "order-0" : "order-1")}
-        style={{ transform: contentNotTranslated ? undefined : flipForRtl }}
+        className={cn(
+          "p-4",
+          isPrev ? "order-0" : "order-1",
+          !contentNotTranslated && twFlipForRtl
+        )}
       >
         {isPrev ? (
           <FaChevronLeft className="text-xl group-hover:fill-primary-hover" />