nate/prayer-app
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: make recent prayers clickable to edit from dashboard

Browse Source
This commit is contained in:
nmemmert committed 2026-01-16 08:21:00 -05:00
1 parent ddad533c81
commit 1d9e2a5d38
2 files changed
+10 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/app/page.tsx
+1
View File
@@ -204,6 +204,7 @@ export default function Home() {
prayers={prayers} prayers={prayers}
todayCount={prayers.filter(p => p.date === new Date().toISOString().split('T')[0]).length} todayCount={prayers.filter(p => p.date === new Date().toISOString().split('T')[0]).length}
onStartPraying={() => setActiveTab('compose')} onStartPraying={() => setActiveTab('compose')}
onSelectPrayer={handleSelectPrayer}
/> />
)} )}
src/components/HomePage.tsx
+9 -6
View File
@@ -16,9 +16,10 @@ interface HomePageProps {
prayers: Prayer[]; prayers: Prayer[];
todayCount: number; todayCount: number;
onStartPraying: () => void; onStartPraying: () => void;
onSelectPrayer: (prayer: Prayer) => void;
} }
export default function HomePage({ prayers, todayCount, onStartPraying }: HomePageProps) { export default function HomePage({ prayers, todayCount, onStartPraying, onSelectPrayer }: HomePageProps) {
const today = new Date().toISOString().split('T')[0]; const today = new Date().toISOString().split('T')[0];
const todayPrayers = prayers.filter(p => p.date === today); const todayPrayers = prayers.filter(p => p.date === today);
const recentPrayers = prayers.slice(0, 5); const recentPrayers = prayers.slice(0, 5);
@@ -117,9 +118,10 @@ export default function HomePage({ prayers, todayCount, onStartPraying }: HomePa
</h2> </h2>
<div className="space-y-3"> <div className="space-y-3">
{recentPrayers.map((prayer, idx) => ( {recentPrayers.map((prayer, idx) => (
<div <button
key={prayer.id} key={prayer.id}
className="group bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 shadow-md border border-slate-700/50 hover:border-blue-500/50 transition-all hover:shadow-xl hover:bg-slate-800/80 transform hover:translate-x-1" onClick={() => onSelectPrayer(prayer)}
className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 shadow-md border border-slate-700/50 hover:border-blue-500/50 transition-all hover:shadow-xl hover:bg-slate-800/80 transform hover:translate-x-1"
> >
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<div className="text-2xl">{prayer.answered ? '✅' : '📝'}</div> <div className="text-2xl">{prayer.answered ? '✅' : '📝'}</div>
@@ -130,12 +132,13 @@ export default function HomePage({ prayers, todayCount, onStartPraying }: HomePa
</div> </div>
)} )}
<p className="text-sm text-slate-300 line-clamp-2 group-hover:text-slate-200">{prayer.text}</p> <p className="text-sm text-slate-300 line-clamp-2 group-hover:text-slate-200">{prayer.text}</p>
<div className="text-xs text-slate-500 mt-2"> <div className="text-xs text-slate-500 mt-2 flex items-center justify-between">
{new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} <span>{new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}</span>
</div> <span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">Click to edit →</span>
</div> </div>
</div> </div>
</div> </div>
</button>
))} ))}
</div> </div>
</div> </div>