Skip to content

Commit 15522ff

Browse files
yonacwyyonacwy
committed
update
1 parent 6faa2fe commit 15522ff

File tree

2 files changed

+46
-117
lines changed

2 files changed

+46
-117
lines changed

‎app/routes/bible.tsx

Lines changed: 20 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -21,44 +21,29 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
2121
export default function BiblePage() {
2222
const { bibleData } = useLoaderData<typeof loader>();
2323
const user = useUser();
24-
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
25-
const [selectedBook, setSelectedBook] = useState<string>(Object.keys(bibleData.books)[0] || ""); // Default to first book, ensure string
26-
const [selectedChapter, setSelectedChapter] = useState<string>("1"); // Default to chapter 1, ensure string
24+
const [selectedBook, setSelectedBook] = useState<string>(Object.keys(bibleData.books)[0] || ""); // Default to first book
25+
const [selectedChapter, setSelectedChapter] = useState<string>("1"); // Default to chapter 1
2726

2827
const books = Object.keys(bibleData.books) as string[];
2928
const chapters = Array.from({ length: bibleData.books[selectedBook] || 0 }, (_, i) => (i + 1).toString());
3029

3130
const bibleText: string = bibleData.kjv[selectedBook]?.[selectedChapter] || "Select a book and chapter to view text.";
3231

32+
// Split the text into paragraphs (assuming paragraphs are separated by double newlines `\n\n`)
33+
const paragraphs = bibleText.split('\n\n').map(paragraph => paragraph.trim()).filter(paragraph => paragraph.length > 0);
34+
3335
return (
3436
<div className="flex h-full min-h-screen flex-col">
3537
{/* Main container with padding-top to account for header */}
36-
<main className="flex-1 flex flex-col md:flex-row-reverse h-full bg-white" style={{ paddingTop: '64px' }}>
37-
{/* Hamburger menu button for mobile only, positioned below header on the right, hides when sidebar is open */}
38-
{!isSidebarOpen && (
39-
<button
40-
onClick={() => setIsSidebarOpen(true)}
41-
className="md:hidden fixed top-16 right-4 z-50 p-4 text-blue-500 focus:outline-none"
42-
>
43-
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
44-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
45-
</svg>
46-
</button>
47-
)}
48-
49-
{/* Sidebar for Bible sections - hidden on mobile by default, fixed width on desktop, now on the right */}
50-
<div className={`
51-
fixed inset-y-0 right-0 transform ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'}
52-
md:relative md:translate-x-0 md:flex md:w-80 md:border-l md:bg-gray-50 md:shadow
53-
transition-transform duration-300 ease-in-out z-40
54-
h-full
55-
`} style={{ top: '64px', boxShadow: '-2px 0 5px rgba(0, 0, 0, 0.1)' }}>
56-
<div className="h-full w-full overflow-y-auto p-4">
38+
<main className="flex-1 flex flex-col h-full bg-white" style={{ paddingTop: '64px' }}>
39+
{/* Picker container fixed below header, ensuring it doesn't overlap nav drawer */}
40+
<div className="fixed top-16 left-0 right-0 bg-white shadow-md z-30 p-4 border-b" style={{ zIndex: 30 }}>
41+
<div className="flex flex-col md:flex-row gap-4 items-center justify-center">
5742
{/* Book Selector */}
5843
<select
5944
value={selectedBook}
6045
onChange={(e) => setSelectedBook(e.target.value)}
61-
className="w-full p-2 mb-4 border rounded"
46+
className="w-full md:w-auto p-2 border rounded"
6247
>
6348
{books.map((book) => (
6449
<option key={book} value={book}>{book}</option>
@@ -69,42 +54,26 @@ export default function BiblePage() {
6954
<select
7055
value={selectedChapter}
7156
onChange={(e) => setSelectedChapter(e.target.value)}
72-
className="w-full p-2 mb-4 border rounded"
57+
className="w-full md:w-auto p-2 border rounded"
7358
>
7459
{chapters.map((chapter) => (
7560
<option key={chapter} value={chapter}>Chapter {chapter}</option>
7661
))}
7762
</select>
7863
</div>
79-
80-
{/* Close button for mobile sidebar - now on the right when sidebar is open */}
81-
{isSidebarOpen && (
82-
<button
83-
onClick={() => setIsSidebarOpen(false)}
84-
className="md:hidden absolute top-4 right-4 text-gray-500 hover:text-gray-800 focus:outline-none"
85-
>
86-
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
87-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
88-
</svg>
89-
</button>
90-
)}
9164
</div>
9265

93-
{/* Overlay for mobile when sidebar is open - now covers left side */}
94-
{isSidebarOpen && (
95-
<div
96-
className="fixed inset-0 bg-black opacity-50 md:hidden z-30"
97-
onClick={() => setIsSidebarOpen(false)}
98-
></div>
99-
)}
100-
101-
{/* Main content area - adjusts for sidebar width on desktop, now on the left, displays Bible text */}
102-
<div className="flex-1 p-6" style={{ marginRight: '320px', transition: 'margin-right 300ms ease-in-out' }}>
66+
{/* Main content area - adjusts for picker height, displays Bible text */}
67+
<div className="flex-1 p-6" style={{ paddingTop: '120px' }}> {/* Increased padding to account for picker */}
10368
<h1 className="text-2xl font-bold mb-4">{selectedBook} Chapter {selectedChapter}</h1>
10469
<div className="prose max-w-none">
105-
{bibleText.split('\n').map((line: string, index: number) => ( // Explicitly type line and index
106-
<p key={index}>{line}</p>
107-
))}
70+
{paragraphs.length > 0 ? (
71+
paragraphs.map((paragraph, index) => (
72+
<p key={index} className="mb-4">{paragraph.split('\n').join(' ')}</p>
73+
))
74+
) : (
75+
<p>{bibleText}</p>
76+
)}
10877
</div>
10978
</div>
11079
</main>

‎app/routes/notes.tsx

Lines changed: 26 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -15,81 +15,41 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
1515
export default function NotesPage() {
1616
const data = useLoaderData<typeof loader>();
1717
const user = useUser();
18-
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
1918

2019
return (
2120
<div className="flex h-full min-h-screen flex-col">
2221
{/* Main container with padding-top to account for header */}
23-
<main className="flex-1 flex flex-col md:flex-row-reverse h-full bg-white" style={{ paddingTop: '64px' }}>
24-
{/* Hamburger menu button for mobile only, positioned below header on the right, hides when sidebar is open */}
25-
{!isSidebarOpen && (
26-
<button
27-
onClick={() => setIsSidebarOpen(true)}
28-
className="md:hidden fixed top-16 right-4 z-50 p-4 text-blue-500 focus:outline-none"
29-
>
30-
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
31-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" />
32-
</svg>
33-
</button>
34-
)}
35-
36-
{/* Sidebar for notes list - hidden on mobile by default, fixed width on desktop, now on the right */}
37-
<div className={`
38-
fixed inset-y-0 right-0 transform ${isSidebarOpen ? 'translate-x-0' : 'translate-x-full'}
39-
md:relative md:translate-x-0 md:flex md:w-80 md:border-l md:bg-gray-50 md:shadow
40-
transition-transform duration-300 ease-in-out z-40
41-
h-full
42-
`} style={{ top: '64px', boxShadow: '-2px 0 5px rgba(0, 0, 0, 0.1)' }}>
43-
<div className="h-full w-full overflow-y-auto">
44-
<Link to="new" className="block p-4 text-xl text-black">
22+
<main className="flex-1 flex flex-col h-full bg-white" style={{ paddingTop: '64px' }}>
23+
{/* Picker container fixed below header, ensuring it doesn't overlap nav drawer */}
24+
<div className="fixed top-16 left-0 right-0 bg-white shadow-md z-30 p-4 border-b" style={{ zIndex: 30 }}>
25+
<div className="flex flex-col md:flex-row gap-4 items-center justify-center">
26+
{/* Note List Dropdown (Picker) */}
27+
<select
28+
className="w-full md:w-auto p-2 border rounded"
29+
onChange={(e) => {
30+
const noteId = e.target.value;
31+
if (noteId) {
32+
window.location.href = `/notes/${noteId}`; // Navigate to the selected note
33+
}
34+
}}
35+
>
36+
<option value="">Select a Note</option>
37+
{data.noteListItems.map((note) => (
38+
<option key={note.id} value={note.id}>
39+
📝 {note.title}
40+
</option>
41+
))}
42+
</select>
43+
44+
{/* New Note Link as a Button */}
45+
<Link to="new" className="w-full md:w-auto p-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-center">
4546
+ New Note
4647
</Link>
47-
48-
<hr />
49-
50-
{data.noteListItems.length === 0 ? (
51-
<p className="p-4">No notes yet</p>
52-
) : (
53-
<ol className="space-y-2">
54-
{data.noteListItems.map((note) => (
55-
<li key={note.id}>
56-
<NavLink
57-
className={({ isActive }) =>
58-
`block p-3 text-lg hover:bg-gray-100 ${isActive ? "bg-white border-r-4 border-blue-500" : ""}`
59-
}
60-
to={note.id}
61-
>
62-
📝 {note.title}
63-
</NavLink>
64-
</li>
65-
))}
66-
</ol>
67-
)}
6848
</div>
69-
70-
{/* Close button for mobile sidebar - now on the right when sidebar is open */}
71-
{isSidebarOpen && (
72-
<button
73-
onClick={() => setIsSidebarOpen(false)}
74-
className="md:hidden absolute top-4 right-4 text-gray-500 hover:text-gray-800 focus:outline-none"
75-
>
76-
<svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
77-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
78-
</svg>
79-
</button>
80-
)}
8149
</div>
8250

83-
{/* Overlay for mobile when sidebar is open - now covers left side */}
84-
{isSidebarOpen && (
85-
<div
86-
className="fixed inset-0 bg-black opacity-50 md:hidden z-30"
87-
onClick={() => setIsSidebarOpen(false)}
88-
></div>
89-
)}
90-
91-
{/* Main content area - adjusts for sidebar width on desktop, now on the left */}
92-
<div className="flex-1 p-4 md:p-6" style={{ marginRight: '320px', transition: 'margin-right 300ms ease-in-out' }}>
51+
{/* Main content area - adjusts for picker height, displays notes */}
52+
<div className="flex-1 p-4 md:p-6" style={{ paddingTop: '120px' }}> {/* Increased padding to account for picker */}
9353
<Outlet />
9454
</div>
9555
</main>

0 commit comments

Comments
 (0)