Add complete React frontend with modern design and navigation
This commit is contained in:
Ryderjj89
154
frontend/src/App.tsx
Normal file
154
frontend/src/App.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Book, ChevronRight, Moon, Sun } from 'lucide-react';
|
||||
import BookSelector from './components/BookSelector';
|
||||
import ChapterSelector from './components/ChapterSelector';
|
||||
import BibleReader from './components/BibleReader';
|
||||
import { getBooks } from './services/api';
|
||||
|
||||
interface BookData {
|
||||
books: string[];
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [books, setBooks] = useState<string[]>([]);
|
||||
const [selectedBook, setSelectedBook] = useState<string>('');
|
||||
const [selectedChapter, setSelectedChapter] = useState<string>('');
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [darkMode, setDarkMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
loadBooks();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (darkMode) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
}, [darkMode]);
|
||||
|
||||
const loadBooks = async () => {
|
||||
try {
|
||||
const data: BookData = await getBooks();
|
||||
setBooks(data.books);
|
||||
} catch (error) {
|
||||
console.error('Failed to load books:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBookSelect = (book: string) => {
|
||||
setSelectedBook(book);
|
||||
setSelectedChapter('');
|
||||
};
|
||||
|
||||
const handleChapterSelect = (chapter: string) => {
|
||||
setSelectedChapter(chapter);
|
||||
};
|
||||
|
||||
const handleBackToBooks = () => {
|
||||
setSelectedBook('');
|
||||
setSelectedChapter('');
|
||||
};
|
||||
|
||||
const handleBackToChapters = () => {
|
||||
setSelectedChapter('');
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Book className="mx-auto h-12 w-12 text-blue-600 animate-pulse" />
|
||||
<p className="mt-4 text-lg">Loading ESV Bible...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||
{/* Header */}
|
||||
<header className="bg-white dark:bg-gray-800 shadow-sm border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Book className="h-8 w-8 text-blue-600" />
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">
|
||||
ESV Bible
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Navigation Breadcrumb */}
|
||||
<div className="flex items-center space-x-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
{selectedBook && (
|
||||
<>
|
||||
<button
|
||||
onClick={handleBackToBooks}
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Books
|
||||
</button>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
{selectedBook}
|
||||
</span>
|
||||
{selectedChapter && (
|
||||
<>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
<button
|
||||
onClick={handleBackToChapters}
|
||||
className="hover:text-blue-600 dark:hover:text-blue-400"
|
||||
>
|
||||
Chapters
|
||||
</button>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
<span className="font-medium text-gray-900 dark:text-gray-100">
|
||||
Chapter {selectedChapter}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dark Mode Toggle */}
|
||||
<button
|
||||
onClick={() => setDarkMode(!darkMode)}
|
||||
className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
{darkMode ? (
|
||||
<Sun className="h-5 w-5 text-yellow-500" />
|
||||
) : (
|
||||
<Moon className="h-5 w-5 text-gray-600" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{!selectedBook ? (
|
||||
<BookSelector books={books} onBookSelect={handleBookSelect} />
|
||||
) : !selectedChapter ? (
|
||||
<ChapterSelector
|
||||
book={selectedBook}
|
||||
onChapterSelect={handleChapterSelect}
|
||||
onBack={handleBackToBooks}
|
||||
/>
|
||||
) : (
|
||||
<BibleReader
|
||||
book={selectedBook}
|
||||
chapter={selectedChapter}
|
||||
onBack={handleBackToChapters}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
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;
|
||||
37
frontend/src/index.css
Normal file
37
frontend/src/index.css
Normal file
@@ -0,0 +1,37 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100;
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
line-height: 1.6;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.bible-text {
|
||||
@apply text-lg leading-relaxed text-gray-800 dark:text-gray-200;
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
.verse-number {
|
||||
@apply text-sm font-semibold text-blue-600 dark:text-blue-400 mr-1;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.book-title {
|
||||
@apply text-2xl font-bold text-center mb-6 text-gray-900 dark:text-gray-100;
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
}
|
||||
|
||||
.chapter-title {
|
||||
@apply text-xl font-semibold mb-4 text-gray-700 dark:text-gray-300;
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
}
|
||||
}
|
||||
13
frontend/src/index.tsx
Normal file
13
frontend/src/index.tsx
Normal file
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
34
frontend/src/services/api.ts
Normal file
34
frontend/src/services/api.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const API_BASE_URL = process.env.REACT_APP_API_URL || 'http://localhost:3000';
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: API_BASE_URL,
|
||||
headers: {
|
||||
'Content-Type': 'text/plain',
|
||||
},
|
||||
});
|
||||
|
||||
export interface BookData {
|
||||
books: string[];
|
||||
}
|
||||
|
||||
export const getBooks = async (): Promise<BookData> => {
|
||||
const response = await api.get('/books');
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getBook = async (book: string): Promise<string> => {
|
||||
const response = await api.get(`/books/${book}`);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const getChapter = async (book: string, chapter: string): Promise<string> => {
|
||||
const response = await api.get(`/books/${book}/${chapter}`);
|
||||
return response.data;
|
||||
};
|
||||
|
||||
export const checkHealth = async (): Promise<{ status: string; message: string }> => {
|
||||
const response = await api.get('/health');
|
||||
return response.data;
|
||||
};
|
||||
Reference in New Issue
Block a user