feat: add pagination

app/books/bg/[chapter]/page.tsx

@@ -1,7 +1,7 @@
 import Link from "next/link";
 import { PageHeader } from "@/components/page-header";
 import { notFound } from "next/navigation";
-import { getBookMeta, getChapterVerses, getChapterVerseIndex } from "@/lib/api";
+import { getBookMeta, getSingleVerse, getChapterVerseIndex } from "@/lib/api";
 import { ChapterViewer } from "@/app/books/chapter-viewer";
 
 type BgMeta = {
@@ -14,11 +14,13 @@ type BgMeta = {
 
 export default async function ChapterPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ chapter: string }>;
+  searchParams: Promise<{ verse?: string }>;
 }) {
   const { chapter } = await params;
-  const PAGE_SIZE = 20;
+  const { verse: verseParam } = await searchParams;
 
   const meta = await getBookMeta("bg");
   if (!meta) notFound();
@@ -31,12 +33,20 @@ export default async function ChapterPage({
 
   const title: string = chapterInfo.title;
 
-  const [verseIndex, firstPage] = await Promise.all([
-    getChapterVerseIndex("bg", null, parseInt(chapter)),
-    getChapterVerses("bg", null, parseInt(chapter), 1, PAGE_SIZE),
-  ]);
+  const verseIndex = await getChapterVerseIndex("bg", null, parseInt(chapter));
   if (verseIndex.length === 0) notFound();
 
+  const requestedVerse = verseParam
+    ? parseInt(verseParam)
+    : verseIndex[0].verse;
+  const verse = await getSingleVerse(
+    "bg",
+    null,
+    parseInt(chapter),
+    requestedVerse,
+  );
+  if (!verse) notFound();
+
   return (
     <div className="min-h-screen bg-background">
       <PageHeader sticky wide>
@@ -53,19 +63,17 @@ export default async function ChapterPage({
 
       <div className="w-full md:max-w-5xl mx-auto flex">
         <ChapterViewer
-          initialVerses={firstPage.verses}
-          hasMore={firstPage.hasMore}
-          totalPages={firstPage.totalPages}
-          book="bg"
-          division={null}
-          chapter={parseInt(chapter)}
-          limit={PAGE_SIZE}
-          showBengali={false}
+          initialVerse={verse}
+          initialVerseNum={requestedVerse}
           verseIndex={verseIndex.map((v) => ({
             verse: v.verse,
             verseEnd: v.verseEnd ?? undefined,
             reference: v.reference,
           }))}
+          book="bg"
+          division={null}
+          chapter={parseInt(chapter)}
+          showBengali={false}
         />
       </div>
     </div>