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

feat: show different colors in Journal calendar for prayer entries vs prayed for activities

Browse Source
This commit is contained in:
nmemmert committed 2026-01-16 10:03:13 -05:00
1 parent ee1daaca25
commit 49d1bdb47d
2 files changed
+54 -8
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/CalendarView.tsx
+53 -7
View File
@@ -7,6 +7,7 @@ interface Prayer {
date: string;
text: string;
prayFor?: string;
lastPrayedFor?: string;
}
interface CalendarViewProps {
@@ -21,6 +22,16 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
return new Set(prayers.map(p => p.date));
}, [prayers]);
const daysWithPrayedFor = useMemo(() => {
const dates = new Set<string>();
prayers.forEach(p => {
if (p.lastPrayedFor) {
dates.add(p.lastPrayedFor);
}
});
return dates;
}, [prayers]);
const getDaysInMonth = (date: Date) => {
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
};
@@ -95,9 +106,26 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
? `${currentMonth.getFullYear()}-${String(currentMonth.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
: null;
const hasEntry = dateString ? daysWithEntries.has(dateString) : false;
const hasPrayedFor = dateString ? daysWithPrayedFor.has(dateString) : false;
const prayerCount = dateString
? prayers.filter(p => p.date === dateString).length
: 0;
const prayedForCount = dateString
? prayers.filter(p => p.lastPrayedFor === dateString).length
: 0;
// Determine color based on activity type
let bgColor = 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600';
if (hasEntry && hasPrayedFor) {
// Both activities - purple (combination)
bgColor = 'bg-purple-500 text-white hover:bg-purple-600 shadow-md';
} else if (hasEntry) {
// Only prayer entries - blue
bgColor = 'bg-blue-500 text-white hover:bg-blue-600 shadow-md';
} else if (hasPrayedFor) {
// Only prayed for - green
bgColor = 'bg-green-500 text-white hover:bg-green-600 shadow-md';
}
return (
<button
@@ -107,19 +135,18 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
className={`aspect-square rounded-lg font-medium transition-all ${
!day
? 'bg-transparent cursor-default'
: hasEntry
? 'bg-blue-500 text-white hover:bg-blue-600 shadow-md'
: 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600'
: bgColor
}`}
>
<div className="h-full flex flex-col items-center justify-center">
{day && (
<>
<span className="text-lg">{day}</span>
{hasEntry && (
<span className="text-xs mt-1 opacity-90">
{prayerCount} {prayerCount === 1 ? 'entry' : 'entries'}
</span>
{(hasEntry || hasPrayedFor) && (
<div className="text-xs mt-1 opacity-90 text-center">
{hasEntry && <div>{prayerCount} entry</div>}
{hasPrayedFor && <div>{prayedForCount} prayed</div>}
</div>
)}
</>
)}
@@ -130,6 +157,25 @@ export default function CalendarView({ prayers, onDayClick }: CalendarViewProps)
</div>
</div>
{/* Color Legend */}
<div className="mt-6 bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
<h3 className="text-sm font-semibold text-slate-900 dark:text-white mb-3">Legend</h3>
<div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm">
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-blue-500"></div>
<span className="text-slate-700 dark:text-slate-300">Prayer Entry</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-green-500"></div>
<span className="text-slate-700 dark:text-slate-300">Prayed For</span>
</div>
<div className="flex items-center gap-2">
<div className="w-4 h-4 rounded bg-purple-500"></div>
<span className="text-slate-700 dark:text-slate-300">Both</span>
</div>
</div>
</div>
{/* Stats */}
<div className="mt-8 grid grid-cols-2 gap-4">
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow">