From 3fde8cfeb89295bb74a85baa7c692543ab03e299 Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Sat, 2 Mar 2024 13:17:19 +0530
Subject: [PATCH 1/4]  #188 Issues: Update ChapterPage.tsx VerseNavigator.tsx

---
 .../(chapter)/[[...locale]]/ChapterPage.tsx   | 12 ++++--
 src/components/Chapter/VerseNavigator.tsx     | 38 +++++++++++--------
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
index af93382..10c990b 100644
--- a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
+++ b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
@@ -51,7 +51,8 @@ export default function ChapterPage({
     : filteredVerses?.slice(0).reverse();
 
   return (
-    <div>
+    <div
+       onClick={() => (viewNavigation && setViewNavigation(false))}>
       <div className="absolute inset-x-0 mx-auto max-w-5xl text-center font-inter">
         <SvgChapterBackground className="relative inset-x-0 bottom-0 m-auto w-full rounded-full text-gray-300 text-opacity-25 dark:text-black dark:text-opacity-25 lg:top-12 lg:w-min" />
       </div>
@@ -86,8 +87,10 @@ export default function ChapterPage({
         </p>
       </section>
 
-      <div className="mx-auto max-w-5xl px-4 text-center  font-inter sm:px-6">
-        <div className="flex items-center justify-between border-y border-gray-200 py-6">
+      <div className="mx-auto max-w-5xl px-4 text-center font-inter sm:px-6">
+        <div
+          className="flex items-center justify-between border-y border-gray-200 py-6"
+        >
           <div
             className={classNames(
               "font-extrabold dark:text-white",
@@ -116,13 +119,14 @@ export default function ChapterPage({
             <VerseNavigator
               verseCount={verses_count}
               currentVerse={verseId}
+              chapterNumber={chapter_number}
               viewNavigation={viewNavigation}
               setViewNavigation={setViewNavigation}
               setVerseId={setVerseId}
             />
             <button
               type="button"
-              className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
+              className="relative -ml-px inline-flex items-center space-x-0.5 rounded-r-md border border-gray-300 bg-gray-50 px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
               onClick={() => setIsAscSorted(!isAscSorted)}
             >
               {isAscSorted ? (
diff --git a/src/components/Chapter/VerseNavigator.tsx b/src/components/Chapter/VerseNavigator.tsx
index 38b98a8..3838d82 100644
--- a/src/components/Chapter/VerseNavigator.tsx
+++ b/src/components/Chapter/VerseNavigator.tsx
@@ -1,6 +1,7 @@
 import { Dispatch, SetStateAction } from "react";
 import { useSelector } from "react-redux";
 
+import LinkWithLocale from "components/LinkWithLocale";
 import useMyStyles from "hooks/useMyStyles";
 import { RootState } from "redux/reducers/rootReducer";
 import { classNames } from "shared/functions";
@@ -8,6 +9,7 @@ import { classNames } from "shared/functions";
 interface Props {
   verseCount: number;
   currentVerse: number;
+  chapterNumber: number;
   viewNavigation: boolean;
   setViewNavigation: Dispatch<SetStateAction<boolean>>;
   setVerseId: Dispatch<SetStateAction<number>>;
@@ -16,6 +18,7 @@ interface Props {
 function VerseNavigator({
   verseCount,
   currentVerse,
+  chapterNumber,
   viewNavigation,
   setViewNavigation,
   setVerseId,
@@ -27,7 +30,7 @@ function VerseNavigator({
     <div
       className={classNames(
         fontSize === "large" ? "top-12" : "top-10",
-        `absolute flex w-full flex-wrap rounded border border-gray-200 bg-white p-3 shadow dark:border-dark-100 dark:bg-dark-bg ${
+        `absolute mt-2 flex w-full flex-wrap justify-center rounded border border-gray-200 bg-white py-1 shadow dark:border-dark-100 dark:bg-dark-bg ${
           !viewNavigation && "hidden"
         }`,
       )}
@@ -38,7 +41,7 @@ function VerseNavigator({
           setVerseId(0);
         }}
         className={classNames(
-          `m-px flex min-w-[2.5rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
+          ` flex min-w-[2.5rem] items-center justify-center rounded  hover:cursor-pointer hover:bg-my-orange hover:text-white ${
             !currentVerse && "bg-my-orange text-white"
           }`,
           styles.fontSize.para,
@@ -49,21 +52,26 @@ function VerseNavigator({
       {Array(verseCount)
         .fill(verseCount)
         .map((_verse, index) => (
-          <div
-            onClick={() => {
-              setViewNavigation(false);
-              setVerseId(index + 1);
-            }}
+          <LinkWithLocale
             key={index}
-            className={classNames(
-              `m-px flex min-w-[2.5rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
-                index + 1 === currentVerse && "bg-my-orange text-white"
-              }`,
-              styles.fontSize.para,
-            )}
+            href={`/chapter/${chapterNumber}/verse/${index + 1}`}
+            prefetch={false}
           >
-            {index + 1}
-          </div>
+            <div
+              onClick={() => {
+                setViewNavigation(false);
+                setVerseId(index + 1);
+              }}
+              className={classNames(
+                `flex min-w-[2.3rem] items-center justify-center rounded py-1 hover:cursor-pointer hover:border hover:bg-my-orange hover:text-white ${
+                  index + 1 === currentVerse && "bg-my-orange text-white"
+                }`,
+                styles.fontSize.para,
+              )}
+            >
+              {index + 1}
+            </div>
+          </LinkWithLocale>
         ))}
     </div>
   );

From 0d67d61a6734166c092f1b2fd5050333df5507da Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Sun, 3 Mar 2024 12:04:20 +0530
Subject: [PATCH 2/4] Update: fix flickering issue

---
 .../(chapter)/[[...locale]]/ChapterPage.tsx          |  9 +++------
 src/components/Chapter/VerseNavigator.tsx            | 12 ++++++------
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
index 10c990b..9a51354 100644
--- a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
+++ b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
@@ -51,8 +51,7 @@ export default function ChapterPage({
     : filteredVerses?.slice(0).reverse();
 
   return (
-    <div
-       onClick={() => (viewNavigation && setViewNavigation(false))}>
+    <div onClick={() => viewNavigation && setViewNavigation(false)}>
       <div className="absolute inset-x-0 mx-auto max-w-5xl text-center font-inter">
         <SvgChapterBackground className="relative inset-x-0 bottom-0 m-auto w-full rounded-full text-gray-300 text-opacity-25 dark:text-black dark:text-opacity-25 lg:top-12 lg:w-min" />
       </div>
@@ -88,9 +87,7 @@ export default function ChapterPage({
       </section>
 
       <div className="mx-auto max-w-5xl px-4 text-center font-inter sm:px-6">
-        <div
-          className="flex items-center justify-between border-y border-gray-200 py-6"
-        >
+        <div className="flex items-center justify-between border-y border-gray-200 py-6">
           <div
             className={classNames(
               "font-extrabold dark:text-white",
@@ -126,7 +123,7 @@ export default function ChapterPage({
             />
             <button
               type="button"
-              className="relative -ml-px inline-flex items-center space-x-0.5 rounded-r-md border border-gray-300 bg-gray-50 px-2 py-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
+              className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 p-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
               onClick={() => setIsAscSorted(!isAscSorted)}
             >
               {isAscSorted ? (
diff --git a/src/components/Chapter/VerseNavigator.tsx b/src/components/Chapter/VerseNavigator.tsx
index 3838d82..0623a71 100644
--- a/src/components/Chapter/VerseNavigator.tsx
+++ b/src/components/Chapter/VerseNavigator.tsx
@@ -30,9 +30,10 @@ function VerseNavigator({
     <div
       className={classNames(
         fontSize === "large" ? "top-12" : "top-10",
-        `absolute mt-2 flex w-full flex-wrap justify-center rounded border border-gray-200 bg-white py-1 shadow dark:border-dark-100 dark:bg-dark-bg ${
-          !viewNavigation && "hidden"
-        }`,
+        `absolute mt-2 flex flex-wrap justify-center rounded border border-gray-200 bg-white py-2 shadow dark:border-dark-100 dark:bg-dark-bg 
+        ${!viewNavigation && "hidden"}
+         ${verseCount > 50 ? "-right-3 w-[350px] md:w-[550px]" : "w-full"}
+        `,
       )}
     >
       <div
@@ -41,7 +42,7 @@ function VerseNavigator({
           setVerseId(0);
         }}
         className={classNames(
-          ` flex min-w-[2.5rem] items-center justify-center rounded  hover:cursor-pointer hover:bg-my-orange hover:text-white ${
+          `flex min-w-[2.5rem] items-center justify-center rounded p-3 hover:cursor-pointer hover:bg-my-orange hover:text-white lg:p-1 ${
             !currentVerse && "bg-my-orange text-white"
           }`,
           styles.fontSize.para,
@@ -60,10 +61,9 @@ function VerseNavigator({
             <div
               onClick={() => {
                 setViewNavigation(false);
-                setVerseId(index + 1);
               }}
               className={classNames(
-                `flex min-w-[2.3rem] items-center justify-center rounded py-1 hover:cursor-pointer hover:border hover:bg-my-orange hover:text-white ${
+                ` flex min-w-[2.5rem] items-center justify-center rounded p-3 hover:cursor-pointer hover:bg-my-orange hover:text-white lg:p-1 ${
                   index + 1 === currentVerse && "bg-my-orange text-white"
                 }`,
                 styles.fontSize.para,

From 997dc7539542fc262b6fda733d9829b08990b629 Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Sun, 3 Mar 2024 13:37:37 +0530
Subject: [PATCH 3/4] Update: Add margin & left alignment

---
 .../[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx   | 2 +-
 src/components/Chapter/VerseNavigator.tsx                     | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
index 9a51354..5e0b1a4 100644
--- a/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
+++ b/src/app/chapter/[chapterNumber]/(chapter)/[[...locale]]/ChapterPage.tsx
@@ -123,7 +123,7 @@ export default function ChapterPage({
             />
             <button
               type="button"
-              className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 p-2 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
+              className="relative -ml-px inline-flex items-center space-x-2 rounded-r-md border border-gray-300 bg-gray-50 p-1 text-sm font-medium text-gray-700 hover:bg-gray-100 focus:border-my-orange focus:outline-none focus:ring-1 focus:ring-my-orange dark:bg-dark-100 dark:text-gray-50 dark:hover:bg-dark-bg"
               onClick={() => setIsAscSorted(!isAscSorted)}
             >
               {isAscSorted ? (
diff --git a/src/components/Chapter/VerseNavigator.tsx b/src/components/Chapter/VerseNavigator.tsx
index 0623a71..edcf32d 100644
--- a/src/components/Chapter/VerseNavigator.tsx
+++ b/src/components/Chapter/VerseNavigator.tsx
@@ -30,7 +30,7 @@ function VerseNavigator({
     <div
       className={classNames(
         fontSize === "large" ? "top-12" : "top-10",
-        `absolute mt-2 flex flex-wrap justify-center rounded border border-gray-200 bg-white py-2 shadow dark:border-dark-100 dark:bg-dark-bg 
+        `absolute mt-2 flex flex-wrap justify-start rounded border border-gray-200 bg-white p-2 shadow dark:border-dark-100 dark:bg-dark-bg md:justify-center md:px-1 
         ${!viewNavigation && "hidden"}
          ${verseCount > 50 ? "-right-3 w-[350px] md:w-[550px]" : "w-full"}
         `,
@@ -63,7 +63,7 @@ function VerseNavigator({
                 setViewNavigation(false);
               }}
               className={classNames(
-                ` flex min-w-[2.5rem] items-center justify-center rounded p-3 hover:cursor-pointer hover:bg-my-orange hover:text-white lg:p-1 ${
+                `flex min-w-[2.5rem] items-center justify-center rounded p-3 hover:cursor-pointer hover:bg-my-orange hover:text-white lg:p-1 ${
                   index + 1 === currentVerse && "bg-my-orange text-white"
                 }`,
                 styles.fontSize.para,

From 0b422842e10eb097533c43eda65f56ac35252e33 Mon Sep 17 00:00:00 2001
From: ankitaniket <ankitaniket3@gmail.com>
Date: Sun, 3 Mar 2024 22:03:28 +0530
Subject: [PATCH 4/4] chore: maintain alignment as it is in production

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

diff --git a/src/components/Chapter/VerseNavigator.tsx b/src/components/Chapter/VerseNavigator.tsx
index edcf32d..91e5438 100644
--- a/src/components/Chapter/VerseNavigator.tsx
+++ b/src/components/Chapter/VerseNavigator.tsx
@@ -30,9 +30,9 @@ function VerseNavigator({
     <div
       className={classNames(
         fontSize === "large" ? "top-12" : "top-10",
-        `absolute mt-2 flex flex-wrap justify-start rounded border border-gray-200 bg-white p-2 shadow dark:border-dark-100 dark:bg-dark-bg md:justify-center md:px-1 
+        `absolute mt-2 flex flex-wrap rounded border border-gray-200 bg-white p-2 shadow dark:border-dark-100 dark:bg-dark-bg 
         ${!viewNavigation && "hidden"}
-         ${verseCount > 50 ? "-right-3 w-[350px] md:w-[550px]" : "w-full"}
+         ${verseCount > 50 ? "-right-1 w-[360px] md:w-[550px]" : "-right-1 w-[360px]"}
         `,
       )}
     >
@@ -42,7 +42,7 @@ function VerseNavigator({
           setVerseId(0);
         }}
         className={classNames(
-          `flex min-w-[2.5rem] items-center justify-center rounded p-3 hover:cursor-pointer hover:bg-my-orange hover:text-white lg:p-1 ${
+          `m-px flex min-w-[2.5rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
             !currentVerse && "bg-my-orange text-white"
           }`,
           styles.fontSize.para,
@@ -63,7 +63,7 @@ function VerseNavigator({
                 setViewNavigation(false);
               }}
               className={classNames(
-                `flex min-w-[2.5rem] items-center justify-center rounded p-3 hover:cursor-pointer hover:bg-my-orange hover:text-white lg:p-1 ${
+                `m-px flex min-w-[2.5rem] items-center justify-center rounded p-2 hover:cursor-pointer hover:bg-my-orange hover:text-white ${
                   index + 1 === currentVerse && "bg-my-orange text-white"
                 }`,
                 styles.fontSize.para,