diff --git a/src/app/page.tsx b/src/app/page.tsx index 676c7e1..ab77633 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -8,6 +8,7 @@ import BottomNav from '@/components/BottomNav'; import DailyEntry from '@/components/DailyEntry'; import CalendarView from '@/components/CalendarView'; import ReflectionsList from '@/components/ReflectionsList'; +import ThingsToPrayFor from '@/components/ThingsToPrayFor'; import AboutPage from '@/components/AboutPage'; import HomePage from '@/components/HomePage'; import AnsweredPrayers from '@/components/AnsweredPrayers'; @@ -26,7 +27,7 @@ interface Prayer { } export default function Home() { - const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'about'>('home'); + const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'answered' | 'praying' | 'reflections' | 'about'>('home'); const [prayers, setPrayers] = useState([]); const [editingPrayer, setEditingPrayer] = useState(null); @@ -233,6 +234,10 @@ export default function Home() { )} + {activeTab === 'praying' && ( + !p.answered)} onEdit={handleSelectPrayer} /> + )} + {activeTab === 'reflections' && ( void; + activeTab: 'home' | 'compose' | 'journal' | 'answered' | 'praying' | 'reflections' | 'about'; + onTabChange: (tab: 'home' | 'compose' | 'journal' | 'answered' | 'praying' | 'reflections' | 'about') => void; } export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) { @@ -15,6 +15,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) { { id: 'home' as const, label: 'Home', icon: '🏠' }, { id: 'compose' as const, label: 'Compose', icon: 'âœī¸' }, { id: 'journal' as const, label: 'Journal', icon: '📅' }, + { id: 'praying' as const, label: 'Praying', icon: '🙏' }, { id: 'answered' as const, label: 'Answered', icon: '✅' }, { id: 'reflections' as const, label: 'Reflections', icon: '📖' }, { id: 'about' as const, label: 'About', icon: 'â„šī¸' }, diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx index 3c34e05..1998959 100644 --- a/src/components/HomePage.tsx +++ b/src/components/HomePage.tsx @@ -176,6 +176,35 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect + {/* Things to Pray For - Active Requests */} + {(() => { + const pendingPrayers = prayers.filter(p => !p.answered); + if (pendingPrayers.length > 0) { + return ( +
+

+ 🙏 Things to Pray For +

+
+
{pendingPrayers.length}
+
active prayer requests
+ +
+
+ ); + } + return null; + })()} + {/* Recent Prayers */} {recentPrayers.length > 0 && (
diff --git a/src/components/ThingsToPrayFor.tsx b/src/components/ThingsToPrayFor.tsx new file mode 100644 index 0000000..e797fd0 --- /dev/null +++ b/src/components/ThingsToPrayFor.tsx @@ -0,0 +1,112 @@ +'use client'; + +import React from 'react'; + +interface Prayer { + id: string; + date: string; + text: string; + prayFor?: string; + answered?: boolean; + answerDetails?: string; +} + +interface ThingsToPrayForProps { + prayers: Prayer[]; + onEdit: (prayer: Prayer) => void; +} + +export default function ThingsToPrayFor({ prayers, onEdit }: 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() + ); + + // Group by prayer for (people/topics) + const groupedByTopic: Record = {}; + thingsToPrayFor.forEach(prayer => { + const topic = prayer.prayFor || 'Other Concerns'; + if (!groupedByTopic[topic]) { + groupedByTopic[topic] = []; + } + groupedByTopic[topic].push(prayer); + }); + + return ( +
+ {/* Animated Background */} +
+
+
+
+ +
+ {/* Header */} +
+

+ 🙏 Things to Pray For +

+

+ {thingsToPrayFor.length} active {thingsToPrayFor.length === 1 ? 'prayer request' : 'prayer requests'} +

+
+ + {thingsToPrayFor.length === 0 ? ( +
+
✨
+

All Caught Up!

+

+ You've marked all your prayers as answered. Praise God for His faithfulness! +

+
+ ) : ( +
+ {Object.entries(groupedByTopic).map(([topic, prayersByTopic]) => ( +
+
+
+

+ đŸŽ¯ {topic} +

+
+
+
+ {prayersByTopic.map((prayer, idx) => { + const daysAgo = Math.floor( + (new Date().getTime() - new Date(prayer.date).getTime()) / (1000 * 60 * 60 * 24) + ); + + return ( + + ); + })} +
+
+ ))} +
+ )} +
+
+ ); +}