feat: add new simplified components for daily prayer journal
- DailyEntry.tsx: Main prayer input form with clean interface - CalendarView.tsx: Monthly calendar showing entry indicators - ReflectionsList.tsx: Browse and search past prayers - SettingsPage.tsx: User preferences and account settings - BottomNav.tsx: Mobile-first navigation with desktop support - All components use Slate color scheme for intimate aesthetic
This commit is contained in:
nmemmert committed
1 parent
b032d14673
commit
a5390e22be
5 files changed
+612
No files matched your search
@@ -0,0 +1,149 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
|
||||
interface Prayer {
|
||||
id: string;
|
||||
date: string;
|
||||
text: string;
|
||||
prayFor?: string;
|
||||
}
|
||||
|
||||
interface CalendarViewProps {
|
||||
prayers: Prayer[];
|
||||
onDayClick: (date: string) => void;
|
||||
}
|
||||
|
||||
export default function CalendarView({ prayers, onDayClick }: CalendarViewProps) {
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||
|
||||
const daysWithEntries = useMemo(() => {
|
||||
return new Set(prayers.map(p => p.date));
|
||||
}, [prayers]);
|
||||
|
||||
const getDaysInMonth = (date: Date) => {
|
||||
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
|
||||
};
|
||||
|
||||
const getFirstDayOfMonth = (date: Date) => {
|
||||
return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
|
||||
};
|
||||
|
||||
const daysInMonth = getDaysInMonth(currentMonth);
|
||||
const firstDay = getFirstDayOfMonth(currentMonth);
|
||||
const prevMonth = () =>
|
||||
setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
|
||||
const nextMonth = () =>
|
||||
setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
|
||||
|
||||
const days = [];
|
||||
for (let i = 0; i < firstDay; i++) {
|
||||
days.push(null);
|
||||
}
|
||||
for (let i = 1; i <= daysInMonth; i++) {
|
||||
days.push(i);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-20 px-4 pb-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Prayer Journal
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Click on days with entries to view them
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Calendar */}
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
|
||||
{/* Month Navigation */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<button
|
||||
onClick={prevMonth}
|
||||
className="px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white transition-colors"
|
||||
>
|
||||
← Previous
|
||||
</button>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
{currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
|
||||
</h2>
|
||||
<button
|
||||
onClick={nextMonth}
|
||||
className="px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white transition-colors"
|
||||
>
|
||||
Next →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Day Headers */}
|
||||
<div className="grid grid-cols-7 gap-2 mb-4">
|
||||
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
|
||||
<div key={day} className="text-center font-semibold text-slate-600 dark:text-slate-400 py-2">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Calendar Days */}
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{days.map((day, index) => {
|
||||
const dateString =
|
||||
day !== null
|
||||
? `${currentMonth.getFullYear()}-${String(currentMonth.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
|
||||
: null;
|
||||
const hasEntry = dateString ? daysWithEntries.has(dateString) : false;
|
||||
const prayerCount = dateString
|
||||
? prayers.filter(p => p.date === dateString).length
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => dateString && onDayClick(dateString)}
|
||||
disabled={!day}
|
||||
className={`aspect-square rounded-lg font-medium transition-all ${
|
||||
!day
|
||||
? 'bg-transparent cursor-default'
|
||||
: hasEntry
|
||||
? 'bg-blue-500 text-white hover:bg-blue-600 shadow-md'
|
||||
: 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600'
|
||||
}`}
|
||||
>
|
||||
<div className="h-full flex flex-col items-center justify-center">
|
||||
{day && (
|
||||
<>
|
||||
<span className="text-lg">{day}</span>
|
||||
{hasEntry && (
|
||||
<span className="text-xs mt-1 opacity-90">
|
||||
{prayerCount} {prayerCount === 1 ? 'entry' : 'entries'}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="mt-8 grid grid-cols-2 gap-4">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Total Entries</p>
|
||||
<p className="text-3xl font-bold text-slate-900 dark:text-white">{prayers.length}</p>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Days with Entries</p>
|
||||
<p className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
{daysWithEntries.size}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user