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

feat: add 'Mark Prayed' button for prayer items with streak tracking

Browse Source
This commit is contained in:
nmemmert committed 2026-01-16 08:47:10 -05:00
1 parent 8105d39554
commit 6c33fc4606
5 files changed
+66 -87
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/ThingsToPrayFor.tsx
+33 -34
View File
@@ -17,9 +17,10 @@ interface Prayer {
interface ThingsToPrayForProps {
prayers: Prayer[];
onEdit: (prayer: Prayer) => void;
onMarkPrayed: (prayerId: string) => void;
}
export default function ThingsToPrayFor({ prayers, onEdit }: ThingsToPrayForProps) {
export default function ThingsToPrayFor({ prayers, onEdit, onMarkPrayed }: ThingsToPrayForProps) {
// Filter for unanswered prayers
const thingsToPrayFor = prayers.filter(p => !p.answered).sort((a, b) =>
new Date(b.date).getTime() - new Date(a.date).getTime()
@@ -78,52 +79,50 @@ export default function ThingsToPrayFor({ prayers, onEdit }: ThingsToPrayForProp
const daysAgo = Math.floor(
(new Date().getTime() - new Date(prayer.date).getTime()) / (1000 * 60 * 60 * 24)
);
const today = new Date().toISOString().split('T')[0];
const prayedToday = prayer.lastPrayedFor === today;
return (
<button
<div
key={prayer.id}
onClick={() => onEdit(prayer)}
className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 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-2"
className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-5 shadow-md border border-slate-700/50 transition-all hover:shadow-xl hover:bg-slate-800/80"
>
<div className="flex items-start gap-3">
<div className="text-3xl mt-0.5">🙏</div>
<div className="flex-1 min-w-0">
<p className="text-base text-slate-200 group-hover:text-white line-clamp-3">
<p className="text-base text-slate-200 line-clamp-3 mb-3">
{prayer.text}
</p>
<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 className="flex items-center justify-between gap-3">
<span className="text-xs text-slate-500">
{daysAgo === 0 ? 'Today' : daysAgo === 1 ? 'Yesterday' : `${daysAgo} days ago`}
</span>
<div className="flex items-center gap-2">
<button
onClick={(e) => {
e.stopPropagation();
onMarkPrayed(prayer.id);
}}
disabled={prayedToday}
className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
prayedToday
? 'bg-green-900/40 text-green-300 border border-green-500/30 cursor-not-allowed'
: 'bg-blue-900/40 text-blue-300 border border-blue-500/30 hover:bg-blue-900/60 hover:border-blue-400/50'
}`}
>
{prayedToday ? '✓ Prayed Today' : '🙏 Mark Prayed'}
</button>
<button
onClick={() => onEdit(prayer)}
className="px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-700/50 text-slate-300 border border-slate-600/50 hover:bg-slate-700/80 hover:border-slate-500/50 transition-all"
>
Edit
</button>
</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>
</button>
</div>
);
})}
</div>