feat: add pagination

app/books/cc/[lila]/[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 ChapterInfo = {
@@ -20,11 +20,13 @@ type LilaInfo = {
 
 export default async function CcChapterPage({
   params,
+  searchParams,
 }: {
   params: Promise<{ lila: string; chapter: string }>;
+  searchParams: Promise<{ verse?: string }>;
 }) {
   const { lila, chapter } = await params;
-  const PAGE_SIZE = 20;
+  const { verse: verseParam } = await searchParams;
 
   const meta = await getBookMeta("cc");
   if (!meta) notFound();
@@ -38,12 +40,20 @@ export default async function CcChapterPage({
   );
   if (!chapterInfo) notFound();
 
-  const [verseIndex, firstPage] = await Promise.all([
-    getChapterVerseIndex("cc", lila, parseInt(chapter)),
-    getChapterVerses("cc", lila, parseInt(chapter), 1, PAGE_SIZE),
-  ]);
+  const verseIndex = await getChapterVerseIndex("cc", lila, parseInt(chapter));
   if (verseIndex.length === 0) notFound();
 
+  const requestedVerse = verseParam
+    ? parseInt(verseParam)
+    : verseIndex[0].verse;
+  const verse = await getSingleVerse(
+    "cc",
+    lila,
+    parseInt(chapter),
+    requestedVerse,
+  );
+  if (!verse) notFound();
+
   return (
     <div className="min-h-screen bg-background">
       <PageHeader sticky wide>
@@ -60,19 +70,17 @@ export default async function CcChapterPage({
 
       <div className="w-full md:max-w-5xl mx-auto flex">
         <ChapterViewer
-          initialVerses={firstPage.verses}
-          hasMore={firstPage.hasMore}
-          totalPages={firstPage.totalPages}
-          book="cc"
-          division={lila}
-          chapter={parseInt(chapter)}
-          limit={PAGE_SIZE}
-          showBengali={true}
+          initialVerse={verse}
+          initialVerseNum={requestedVerse}
           verseIndex={verseIndex.map((v) => ({
             verse: v.verse,
             verseEnd: v.verseEnd ?? undefined,
             reference: v.reference,
           }))}
+          book="cc"
+          division={lila}
+          chapter={parseInt(chapter)}
+          showBengali={true}
         />
       </div>
     </div>