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

feat: add prayer frequency tracking with 1-7 slider and frequency compliance calculation

Browse Source
This commit is contained in:
nmemmert committed 2026-01-16 08:40:09 -05:00
1 parent 4225ef017c
commit 8105d39554
7 files changed
+88 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/ThingsToPrayFor.tsx
+31 -7
View File
@@ -10,6 +10,8 @@ interface Prayer {
prayFor?: string;
answered?: boolean;
answerDetails?: string;
prayFrequency?: number; // 1-7 times per week
lastPrayedFor?: string; // ISO date string
}
interface ThingsToPrayForProps {
@@ -89,13 +91,35 @@ export default function ThingsToPrayFor({ prayers, onEdit }: ThingsToPrayForProp
<p className="text-base text-slate-200 group-hover:text-white line-clamp-3">
{prayer.text}
</p>
<div className="mt-3 flex items-center justify-between text-xs">
<span className="text-slate-500">
{daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
</span>
<span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">
Edit & Mark Answered →
</span>
<div className="mt-3 space-y-2">
<div className="flex items-center justify-between text-xs">
<span className="text-slate-500">
{daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
</span>
<span className="text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity">
Edit →
</span>
</div>
{prayer.prayFrequency && (
<div className="flex items-center gap-2">
<div className="text-xs font-semibold text-amber-400">Pray:</div>
<div className="flex gap-1">
{Array.from({ length: prayer.prayFrequency }).map((_, i) => (
<div
key={i}
className="w-2 h-2 rounded-full bg-amber-400/60"
/>
))}
{Array.from({ length: 7 - prayer.prayFrequency }).map((_, i) => (
<div
key={`empty-${i}`}
className="w-2 h-2 rounded-full bg-slate-600/40"
/>
))}
</div>
<span className="text-xs text-slate-400">× per week</span>
</div>
)}
</div>
</div>
</div>