Add complete React frontend with modern design and navigation
This commit is contained in:
Ryderjj89
154
frontend/src/components/BibleReader.tsx
Normal file
154
frontend/src/components/BibleReader.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ArrowLeft, BookOpen } from 'lucide-react';
|
||||
import { getChapter } from '../services/api';
|
||||
|
||||
interface BibleReaderProps {
|
||||
book: string;
|
||||
chapter: string;
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
const BibleReader: React.FC<BibleReaderProps> = ({ book, chapter, onBack }) => {
|
||||
const [content, setContent] = useState<string>('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [fontSize, setFontSize] = useState<'small' | 'medium' | 'large'>('medium');
|
||||
|
||||
useEffect(() => {
|
||||
loadChapter();
|
||||
}, [book, chapter]);
|
||||
|
||||
const loadChapter = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const chapterContent = await getChapter(book, chapter);
|
||||
setContent(chapterContent);
|
||||
} catch (error) {
|
||||
console.error('Failed to load chapter:', error);
|
||||
setContent('Error loading chapter. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getFontSizeClass = () => {
|
||||
switch (fontSize) {
|
||||
case 'small':
|
||||
return 'text-base';
|
||||
case 'large':
|
||||
return 'text-xl';
|
||||
default:
|
||||
return 'text-lg';
|
||||
}
|
||||
};
|
||||
|
||||
const parseBibleText = (text: string) => {
|
||||
const lines = text.split('\n');
|
||||
const verses: JSX.Element[] = [];
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
|
||||
// Skip empty lines
|
||||
if (!line) continue;
|
||||
|
||||
// Check if line starts with verse number (e.g., "1 ", "2 ", etc.)
|
||||
const verseMatch = line.match(/^(\d+)\s+(.+)$/);
|
||||
if (verseMatch) {
|
||||
const verseNumber = verseMatch[1];
|
||||
const verseText = verseMatch[2];
|
||||
|
||||
verses.push(
|
||||
<div key={`verse-${verseNumber}`} className="mb-4">
|
||||
<span className="verse-number">{verseNumber}</span>
|
||||
<span className="bible-text">{verseText}</span>
|
||||
</div>
|
||||
);
|
||||
} else if (line.startsWith('#')) {
|
||||
// Chapter header
|
||||
const headerText = line.replace(/^#+\s*/, '');
|
||||
verses.push(
|
||||
<h2 key={`header-${i}`} className="chapter-title">
|
||||
{headerText}
|
||||
</h2>
|
||||
);
|
||||
} else {
|
||||
// Regular text (continuation of previous verse or other content)
|
||||
verses.push(
|
||||
<p key={`text-${i}`} className="bible-text mb-4">
|
||||
{line}
|
||||
</p>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return verses;
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="text-center py-12">
|
||||
<BookOpen 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 chapter...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between 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 Chapters</span>
|
||||
</button>
|
||||
|
||||
{/* Font Size Controls */}
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">Font Size:</span>
|
||||
<div className="flex space-x-1">
|
||||
{(['small', 'medium', 'large'] as const).map((size) => (
|
||||
<button
|
||||
key={size}
|
||||
onClick={() => setFontSize(size)}
|
||||
className={`px-3 py-1 text-xs rounded ${
|
||||
fontSize === size
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600'
|
||||
} transition-colors`}
|
||||
>
|
||||
{size.charAt(0).toUpperCase() + size.slice(1)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chapter Title */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="book-title">
|
||||
{book} {chapter}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Bible Content */}
|
||||
<div className={`max-w-3xl mx-auto leading-relaxed ${getFontSizeClass()}`}>
|
||||
{parseBibleText(content)}
|
||||
</div>
|
||||
|
||||
{/* Footer Navigation */}
|
||||
<div className="flex justify-center mt-12 space-x-4">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Back to Chapters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BibleReader;
|
||||
53
frontend/src/components/BookSelector.tsx
Normal file
53
frontend/src/components/BookSelector.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
import React from 'react';
|
||||
import { BookOpen } from 'lucide-react';
|
||||
|
||||
interface BookSelectorProps {
|
||||
books: string[];
|
||||
onBookSelect: (book: string) => void;
|
||||
}
|
||||
|
||||
const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect }) => {
|
||||
// Group books by testament
|
||||
const oldTestament = books.slice(0, 39); // First 39 books
|
||||
const newTestament = books.slice(39); // Remaining books
|
||||
|
||||
const BookGroup: React.FC<{ title: string; books: string[] }> = ({ title, books }) => (
|
||||
<div className="mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6 text-center">
|
||||
{title}
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{books.map((book) => (
|
||||
<button
|
||||
key={book}
|
||||
onClick={() => onBookSelect(book)}
|
||||
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"
|
||||
>
|
||||
<BookOpen className="mx-auto h-8 w-8 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">
|
||||
{book}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-12">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
ESV Bible
|
||||
</h1>
|
||||
<p className="text-lg text-gray-600 dark:text-gray-400">
|
||||
Select a book to begin reading
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<BookGroup title="Old Testament" books={oldTestament} />
|
||||
<BookGroup title="New Testament" books={newTestament} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BookSelector;
|
||||
105
frontend/src/components/ChapterSelector.tsx
Normal file
105
frontend/src/components/ChapterSelector.tsx
Normal file
@@ -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;
|
||||
Reference in New Issue
Block a user