Add complete React frontend with modern design and navigation
This commit is contained in:
Ryderjj89
48
frontend/package.json
Normal file
48
frontend/package.json
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
{
|
||||||
|
"name": "esv-bible-frontend",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/node": "^16.18.0",
|
||||||
|
"@types/react": "^18.2.0",
|
||||||
|
"@types/react-dom": "^18.2.0",
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-scripts": "5.0.1",
|
||||||
|
"typescript": "^4.9.0",
|
||||||
|
"web-vitals": "^2.1.0",
|
||||||
|
"axios": "^1.6.0",
|
||||||
|
"react-router-dom": "^6.20.0",
|
||||||
|
"lucide-react": "^0.294.0"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"start": "react-scripts start",
|
||||||
|
"build": "react-scripts build",
|
||||||
|
"test": "react-scripts test",
|
||||||
|
"eject": "react-scripts eject"
|
||||||
|
},
|
||||||
|
"eslintConfig": {
|
||||||
|
"extends": [
|
||||||
|
"react-app",
|
||||||
|
"react-app/jest"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"browserslist": {
|
||||||
|
"production": [
|
||||||
|
">0.2%",
|
||||||
|
"not dead",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"development": [
|
||||||
|
"last 1 chrome version",
|
||||||
|
"last 1 firefox version",
|
||||||
|
"last 1 safari version"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"tailwindcss": "^3.3.0",
|
||||||
|
"autoprefixer": "^10.4.0",
|
||||||
|
"postcss": "^8.4.0",
|
||||||
|
"@tailwindcss/typography": "^0.5.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
6
frontend/postcss.config.js
Normal file
6
frontend/postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
}
|
||||||
17
frontend/public/index.html
Normal file
17
frontend/public/index.html
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta name="description" content="ESV Bible - Read and study the English Standard Version Bible online" />
|
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<title>ESV Bible</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
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;
|
||||||
|
};
|
||||||
28
frontend/tailwind.config.js
Normal file
28
frontend/tailwind.config.js
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
"./src/**/*.{js,jsx,ts,tsx}",
|
||||||
|
],
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {
|
||||||
|
fontFamily: {
|
||||||
|
serif: ['Georgia', 'Times New Roman', 'serif'],
|
||||||
|
},
|
||||||
|
typography: {
|
||||||
|
DEFAULT: {
|
||||||
|
css: {
|
||||||
|
color: 'inherit',
|
||||||
|
a: {
|
||||||
|
color: 'inherit',
|
||||||
|
textDecoration: 'none',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
],
|
||||||
|
}
|
||||||
26
frontend/tsconfig.json
Normal file
26
frontend/tsconfig.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"es6"
|
||||||
|
],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"noFallthroughCasesInSwitch": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
]
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user