feat: redesign home tab as dashboard with stats, move prayer entry to journal tab
This commit is contained in:
nmemmert committed
1 parent
8a5658a359
commit
7237aa6181
2 files changed
+117
-10
No files matched your search
+20
-10
@@ -9,6 +9,7 @@ import DailyEntry from '@/components/DailyEntry';
|
||||
import CalendarView from '@/components/CalendarView';
|
||||
import ReflectionsList from '@/components/ReflectionsList';
|
||||
import SettingsPage from '@/components/SettingsPage';
|
||||
import HomePage from '@/components/HomePage';
|
||||
import { db } from '@/lib/firebase';
|
||||
import { collection, addDoc, getDocs, updateDoc, query, where, doc } from 'firebase/firestore';
|
||||
import toast from 'react-hot-toast';
|
||||
@@ -190,20 +191,29 @@ export default function Home() {
|
||||
<BottomNav activeTab={activeTab} onTabChange={setActiveTab} />
|
||||
|
||||
{activeTab === 'home' && (
|
||||
<DailyEntry
|
||||
date={date}
|
||||
onDateChange={setDate}
|
||||
text={text}
|
||||
onTextChange={setText}
|
||||
prayFor={prayFor}
|
||||
onPrayForChange={setPrayFor}
|
||||
onSubmit={handleSubmit}
|
||||
isEditing={!!editingPrayer}
|
||||
<HomePage
|
||||
prayers={prayers}
|
||||
todayCount={prayers.filter(p => p.date === new Date().toISOString().split('T')[0]).length}
|
||||
onStartPraying={() => setActiveTab('journal')}
|
||||
/>
|
||||
)}
|
||||
|
||||
{activeTab === 'journal' && (
|
||||
<CalendarView prayers={prayers} onDayClick={handleDateClick} />
|
||||
<>
|
||||
<DailyEntry
|
||||
date={date}
|
||||
onDateChange={setDate}
|
||||
text={text}
|
||||
onTextChange={setText}
|
||||
prayFor={prayFor}
|
||||
onPrayForChange={setPrayFor}
|
||||
onSubmit={handleSubmit}
|
||||
isEditing={!!editingPrayer}
|
||||
/>
|
||||
<div className="max-w-md mx-auto p-4">
|
||||
<CalendarView prayers={prayers} onDayClick={handleDateClick} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{activeTab === 'reflections' && (
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
'use client';
|
||||
|
||||
interface Prayer {
|
||||
id: string;
|
||||
userId: string;
|
||||
date: string;
|
||||
text: string;
|
||||
prayFor?: string;
|
||||
}
|
||||
|
||||
interface HomePageProps {
|
||||
prayers: Prayer[];
|
||||
todayCount: number;
|
||||
onStartPraying: () => void;
|
||||
}
|
||||
|
||||
export default function HomePage({ prayers, todayCount, onStartPraying }: HomePageProps) {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const todayPrayers = prayers.filter(p => p.date === today);
|
||||
const recentPrayers = prayers.slice(0, 5);
|
||||
const totalPrayers = prayers.length;
|
||||
const uniqueDays = new Set(prayers.map(p => p.date)).size;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-24">
|
||||
{/* Header */}
|
||||
<div className="max-w-md mx-auto mt-6 mb-8">
|
||||
<h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">Prayer Journal</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
{new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Today's Stats */}
|
||||
<div className="max-w-md mx-auto mb-8 space-y-3">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
|
||||
<div className="text-sm font-semibold text-slate-600 dark:text-slate-400 mb-1">Today's Prayers</div>
|
||||
<div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{todayCount}</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
|
||||
<div className="text-xs font-semibold text-slate-600 dark:text-slate-400 mb-1">Total Prayers</div>
|
||||
<div className="text-2xl font-bold text-slate-900 dark:text-white">{totalPrayers}</div>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
|
||||
<div className="text-xs font-semibold text-slate-600 dark:text-slate-400 mb-1">Days Prayed</div>
|
||||
<div className="text-2xl font-bold text-slate-900 dark:text-white">{uniqueDays}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="max-w-md mx-auto mb-8">
|
||||
<button
|
||||
onClick={onStartPraying}
|
||||
className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 rounded-lg transition-all shadow-md hover:shadow-lg"
|
||||
>
|
||||
+ New Prayer
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Recent Prayers */}
|
||||
{recentPrayers.length > 0 && (
|
||||
<div className="max-w-md mx-auto">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Recent Prayers</h2>
|
||||
<div className="space-y-3">
|
||||
{recentPrayers.map((prayer) => (
|
||||
<div key={prayer.id} className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
|
||||
{prayer.prayFor && (
|
||||
<div className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-1 uppercase tracking-wide">
|
||||
{prayer.prayFor}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300 line-clamp-2">{prayer.text}</p>
|
||||
<div className="text-xs text-slate-500 dark:text-slate-500 mt-2">
|
||||
{new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Empty State */}
|
||||
{prayers.length === 0 && (
|
||||
<div className="max-w-md mx-auto text-center py-12">
|
||||
<div className="text-4xl mb-3">🙏</div>
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-4">Start your prayer journal today</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-500">
|
||||
Create your first prayer entry and begin tracking your spiritual journey.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user