106 lines
4.1 KiB
TypeScript
106 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect } from 'react';
|
|
import Clock from './Clock';
|
|
|
|
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-32 pt-8">
|
|
{/* Clock */}
|
|
<div className="max-w-md mx-auto mb-8">
|
|
<Clock />
|
|
</div>
|
|
|
|
{/* Header */}
|
|
<div className="max-w-md mx-auto 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>
|
|
);
|
|
}
|