Full push for initial version of NullTranslationGroup website.

src/app/books/[bookId]/chapters/[chapterId]/page.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import NavigationButtons from "@/components/NavigationButtons";
+import { Chapter } from "@/lib/types";
+import { fetchBookById } from "@/lib/api";
+
+export type paramsType = Promise<{ bookId: string; chapterId: string }>;
+
+// Dynamic page component
+export default async function ChapterPage(props: { params: paramsType}) {
+    const { bookId, chapterId } = await props.params;
+
+    const book = await fetchBookById(bookId);
+
+    const chapters :Chapter[] = book.chapters;
+    const sorted_chapters:Chapter[] = chapters.sort((a, b) => a.Chapter_Number - b.Chapter_Number);
+    const current_chapter = sorted_chapters.find((chapter) => chapter.documentId === chapterId) || undefined;
+    const next_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.Chapter_Number === current_chapter.Chapter_Number + 1)?.documentId || "" : "";
+    const prev_chapter = current_chapter ? sorted_chapters.find((chapter) => chapter.Chapter_Number === current_chapter.Chapter_Number - 1)?.documentId || "" : "";
+    // Fetch chapter data
+    
+    if (current_chapter === undefined) {
+        return (    
+            <div className="relative bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
+                <div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
+            <div dangerouslySetInnerHTML={{ __html: '<center><h1> Chapter not found !</h1></center>' }}></div>
+    
+            {/* Client component for navigation */}
+            <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
+            </div>
+      </div>
+        )
+    }
+  
+    
+    return (
+            <div className="prose dark:prose-invert mx-auto p-6 bg-white dark:bg-gray-800 shadow-md rounded-lg">
+            <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter} />
+            
+            <div className="pt-4" dangerouslySetInnerHTML={{ __html: current_chapter.Content }}></div>
+        
+            {/* Client component for navigation */}
+            <NavigationButtons bookId={bookId} documentId={chapterId} prevChapter={prev_chapter} nextChapter={next_chapter}/>
+            </div>
+      );
+    
+}