Add complete React frontend with modern design and navigation

2025-09-13 12:09:52 -04:00
parent fab87ca06b
commit 84f1dfaf23
12 changed files with 675 additions and 0 deletions
--- a/frontend/src/components/ChapterSelector.tsx
+++ b/frontend/src/components/ChapterSelector.tsx
@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { ArrowLeft, FileText } from 'lucide-react';
+import { getBook } from '../services/api';
+
+interface ChapterSelectorProps {
+  book: string;
+  onChapterSelect: (chapter: string) => void;
+  onBack: () => void;
+}
+
+const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack }) => {
+  const [chapters, setChapters] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    loadChapters();
+  }, [book]);
+
+  const loadChapters = async () => {
+    try {
+      setLoading(true);
+      const bookContent = await getBook(book);
+
+      // Parse markdown to extract chapter numbers
+      const lines = bookContent.split('\n');
+      const chapterNumbers: string[] = [];
+
+      for (const line of lines) {
+        // Look for chapter headers like "# 1" or "# 1\n"
+        const chapterMatch = line.match(/^#\s+(\d+)/);
+        if (chapterMatch) {
+          chapterNumbers.push(chapterMatch[1]);
+        }
+      }
+
+      setChapters(chapterNumbers);
+    } catch (error) {
+      console.error('Failed to load chapters:', error);
+      // Fallback: generate chapter numbers 1-50 (most books have fewer than 50 chapters)
+      const fallbackChapters = Array.from({ length: 50 }, (_, i) => (i + 1).toString());
+      setChapters(fallbackChapters);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="text-center py-12">
+        <FileText className="mx-auto h-12 w-12 text-blue-600 animate-pulse mb-4" />
+        <p className="text-lg text-gray-600 dark:text-gray-400">Loading chapters...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="flex items-center mb-8">
+        <button
+          onClick={onBack}
+          className="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 transition-colors"
+        >
+          <ArrowLeft className="h-5 w-5" />
+          <span>Back to Books</span>
+        </button>
+      </div>
+
+      {/* Book Title */}
+      <div className="text-center mb-8">
+        <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
+          {book}
+        </h1>
+        <p className="text-lg text-gray-600 dark:text-gray-400">
+          Select a chapter to read
+        </p>
+      </div>
+
+      {/* Chapters Grid */}
+      <div className="grid grid-cols-4 sm:grid-cols-6 md:grid-cols-8 lg:grid-cols-10 gap-3 max-w-4xl mx-auto">
+        {chapters.map((chapter) => (
+          <button
+            key={chapter}
+            onClick={() => onChapterSelect(chapter)}
+            className="group bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 hover:shadow-md hover:border-blue-300 dark:hover:border-blue-600 transition-all duration-200 text-center"
+          >
+            <FileText className="mx-auto h-6 w-6 text-blue-600 dark:text-blue-400 mb-2 group-hover:scale-110 transition-transform" />
+            <span className="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-blue-600 dark:group-hover:text-blue-400">
+              {chapter}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Chapter Count */}
+      <div className="text-center mt-8">
+        <p className="text-sm text-gray-500 dark:text-gray-400">
+          {chapters.length} chapters available
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ChapterSelector;