feat: add new simplified components for daily prayer journal
- DailyEntry.tsx: Main prayer input form with clean interface - CalendarView.tsx: Monthly calendar showing entry indicators - ReflectionsList.tsx: Browse and search past prayers - SettingsPage.tsx: User preferences and account settings - BottomNav.tsx: Mobile-first navigation with desktop support - All components use Slate color scheme for intimate aesthetic
This commit is contained in:
nmemmert committed
1 parent
b032d14673
commit
a5390e22be
5 files changed
+612
No files matched your search
@@ -0,0 +1,76 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
|
||||
interface BottomNavProps {
|
||||
activeTab: 'home' | 'journal' | 'reflections' | 'settings';
|
||||
onTabChange: (tab: 'home' | 'journal' | 'reflections' | 'settings') => void;
|
||||
}
|
||||
|
||||
export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
|
||||
const { logout, user } = useAuth();
|
||||
|
||||
const navItems = [
|
||||
{ id: 'home' as const, label: 'Home', icon: '🏠' },
|
||||
{ id: 'journal' as const, label: 'Journal', icon: '📅' },
|
||||
{ id: 'reflections' as const, label: 'Reflections', icon: '📖' },
|
||||
{ id: 'settings' as const, label: 'Settings', icon: '⚙️' },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Mobile Bottom Navigation */}
|
||||
<nav className="fixed bottom-0 left-0 right-0 bg-white dark:bg-slate-800 border-t border-slate-200 dark:border-slate-700 md:hidden z-50">
|
||||
<div className="flex justify-around">
|
||||
{navItems.map(item => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onTabChange(item.id)}
|
||||
className={`flex-1 py-3 px-2 flex flex-col items-center justify-center gap-1 transition-colors ${
|
||||
activeTab === item.id
|
||||
? 'text-blue-600 dark:text-blue-400'
|
||||
: 'text-slate-600 dark:text-slate-400'
|
||||
}`}
|
||||
>
|
||||
<span className="text-2xl">{item.icon}</span>
|
||||
<span className="text-xs font-medium">{item.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Desktop Top Navigation */}
|
||||
<nav className="hidden md:fixed md:top-0 md:left-0 md:right-0 md:bg-white md:dark:bg-slate-800 md:border-b md:border-slate-200 md:dark:border-slate-700 md:z-50 md:flex md:items-center md:justify-between md:px-6 md:py-4">
|
||||
<div className="flex items-center gap-8">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-white">Prayer Journal</h1>
|
||||
<div className="flex gap-1">
|
||||
{navItems.map(item => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => onTabChange(item.id)}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors flex items-center gap-2 ${
|
||||
activeTab === item.id
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700'
|
||||
}`}
|
||||
>
|
||||
<span>{item.icon}</span>
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={logout}
|
||||
className="px-4 py-2 rounded-lg font-medium text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{/* Mobile padding for bottom nav */}
|
||||
<div className="h-20 md:h-0" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,149 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
|
||||
interface Prayer {
|
||||
id: string;
|
||||
date: string;
|
||||
text: string;
|
||||
prayFor?: string;
|
||||
}
|
||||
|
||||
interface CalendarViewProps {
|
||||
prayers: Prayer[];
|
||||
onDayClick: (date: string) => void;
|
||||
}
|
||||
|
||||
export default function CalendarView({ prayers, onDayClick }: CalendarViewProps) {
|
||||
const [currentMonth, setCurrentMonth] = useState(new Date());
|
||||
|
||||
const daysWithEntries = useMemo(() => {
|
||||
return new Set(prayers.map(p => p.date));
|
||||
}, [prayers]);
|
||||
|
||||
const getDaysInMonth = (date: Date) => {
|
||||
return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
|
||||
};
|
||||
|
||||
const getFirstDayOfMonth = (date: Date) => {
|
||||
return new Date(date.getFullYear(), date.getMonth(), 1).getDay();
|
||||
};
|
||||
|
||||
const daysInMonth = getDaysInMonth(currentMonth);
|
||||
const firstDay = getFirstDayOfMonth(currentMonth);
|
||||
const prevMonth = () =>
|
||||
setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1));
|
||||
const nextMonth = () =>
|
||||
setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1));
|
||||
|
||||
const days = [];
|
||||
for (let i = 0; i < firstDay; i++) {
|
||||
days.push(null);
|
||||
}
|
||||
for (let i = 1; i <= daysInMonth; i++) {
|
||||
days.push(i);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-20 px-4 pb-8">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Prayer Journal
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Click on days with entries to view them
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Calendar */}
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6">
|
||||
{/* Month Navigation */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<button
|
||||
onClick={prevMonth}
|
||||
className="px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white transition-colors"
|
||||
>
|
||||
← Previous
|
||||
</button>
|
||||
<h2 className="text-2xl font-bold text-slate-900 dark:text-white">
|
||||
{currentMonth.toLocaleDateString('en-US', { month: 'long', year: 'numeric' })}
|
||||
</h2>
|
||||
<button
|
||||
onClick={nextMonth}
|
||||
className="px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 hover:bg-slate-300 dark:hover:bg-slate-600 text-slate-900 dark:text-white transition-colors"
|
||||
>
|
||||
Next →
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Day Headers */}
|
||||
<div className="grid grid-cols-7 gap-2 mb-4">
|
||||
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map(day => (
|
||||
<div key={day} className="text-center font-semibold text-slate-600 dark:text-slate-400 py-2">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Calendar Days */}
|
||||
<div className="grid grid-cols-7 gap-2">
|
||||
{days.map((day, index) => {
|
||||
const dateString =
|
||||
day !== null
|
||||
? `${currentMonth.getFullYear()}-${String(currentMonth.getMonth() + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`
|
||||
: null;
|
||||
const hasEntry = dateString ? daysWithEntries.has(dateString) : false;
|
||||
const prayerCount = dateString
|
||||
? prayers.filter(p => p.date === dateString).length
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => dateString && onDayClick(dateString)}
|
||||
disabled={!day}
|
||||
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'
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</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">
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Total Entries</p>
|
||||
<p className="text-3xl font-bold text-slate-900 dark:text-white">{prayers.length}</p>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow">
|
||||
<p className="text-slate-600 dark:text-slate-400 text-sm font-medium">Days with Entries</p>
|
||||
<p className="text-3xl font-bold text-slate-900 dark:text-white">
|
||||
{daysWithEntries.size}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,111 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
interface DailyEntryProps {
|
||||
date: string;
|
||||
onDateChange: (date: string) => void;
|
||||
text: string;
|
||||
onTextChange: (text: string) => void;
|
||||
prayFor: string;
|
||||
onPrayForChange: (prayFor: string) => void;
|
||||
onSubmit: (e: React.FormEvent) => void;
|
||||
loading?: boolean;
|
||||
isEditing?: boolean;
|
||||
}
|
||||
|
||||
export default function DailyEntry({
|
||||
date,
|
||||
onDateChange,
|
||||
text,
|
||||
onTextChange,
|
||||
prayFor,
|
||||
onPrayForChange,
|
||||
onSubmit,
|
||||
loading = false,
|
||||
isEditing = false,
|
||||
}: DailyEntryProps) {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const isToday = date === today;
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-20 px-4 pb-8">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
{isToday ? "Today's Prayer" : 'Prayer Entry'}
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
{new Date(date).toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Entry Form */}
|
||||
<form onSubmit={onSubmit} className="space-y-6">
|
||||
{/* Date Input */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
value={date}
|
||||
onChange={(e) => onDateChange(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Pray For */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Praying For (Optional)
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={prayFor}
|
||||
onChange={(e) => onPrayForChange(e.target.value)}
|
||||
placeholder="Person, situation, or concern..."
|
||||
className="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Prayer Text */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
|
||||
Your Prayer
|
||||
</label>
|
||||
<textarea
|
||||
value={text}
|
||||
onChange={(e) => onTextChange(e.target.value)}
|
||||
placeholder="Write your thoughts, feelings, and prayers here..."
|
||||
rows={10}
|
||||
required
|
||||
className="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none font-serif"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 disabled:cursor-not-allowed shadow-md hover:shadow-lg"
|
||||
>
|
||||
{loading ? 'Saving...' : isEditing ? 'Update Prayer' : 'Save Prayer'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Word Count */}
|
||||
<div className="mt-4 text-sm text-slate-500 dark:text-slate-400 text-center">
|
||||
{text.length > 0 && `${text.split(/\s+/).filter(w => w).length} words`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface Prayer {
|
||||
id: string;
|
||||
date: string;
|
||||
text: string;
|
||||
prayFor?: string;
|
||||
}
|
||||
|
||||
interface PrayerListProps {
|
||||
prayers: Prayer[];
|
||||
onPrayerClick: (prayer: Prayer) => void;
|
||||
onEdit: (prayer: Prayer) => void;
|
||||
}
|
||||
|
||||
export default function PrayerList({ prayers, onPrayerClick, onEdit }: PrayerListProps) {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [sortOrder, setSortOrder] = useState<'newest' | 'oldest'>('newest');
|
||||
|
||||
const filtered = prayers
|
||||
.filter(
|
||||
p =>
|
||||
p.text.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
p.prayFor?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
.sort((a, b) => {
|
||||
const comparison = new Date(b.date).getTime() - new Date(a.date).getTime();
|
||||
return sortOrder === 'newest' ? comparison : -comparison;
|
||||
});
|
||||
|
||||
const grouped = filtered.reduce((acc, prayer) => {
|
||||
if (!acc[prayer.date]) acc[prayer.date] = [];
|
||||
acc[prayer.date].push(prayer);
|
||||
return acc;
|
||||
}, {} as Record<string, Prayer[]>);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-20 px-4 pb-8">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Past Prayers
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Browse and reflect on your prayer history
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="space-y-4 mb-8">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search prayers..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => setSortOrder('newest')}
|
||||
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
sortOrder === 'newest'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-300 dark:hover:bg-slate-600'
|
||||
}`}
|
||||
>
|
||||
Newest First
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSortOrder('oldest')}
|
||||
className={`flex-1 px-4 py-2 rounded-lg font-medium transition-colors ${
|
||||
sortOrder === 'oldest'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-300 dark:hover:bg-slate-600'
|
||||
}`}
|
||||
>
|
||||
Oldest First
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Prayers List */}
|
||||
<div className="space-y-6">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-slate-600 dark:text-slate-400 text-lg">
|
||||
No prayers found. {searchTerm && 'Try adjusting your search.'}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
Object.keys(grouped)
|
||||
.sort()
|
||||
.reverse()
|
||||
.map(date => (
|
||||
<div key={date}>
|
||||
<h2 className="text-sm font-semibold text-slate-500 dark:text-slate-400 mb-3 uppercase tracking-wider">
|
||||
{new Date(date).toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: grouped[date].some(
|
||||
p => new Date(p.date).getFullYear() !== new Date().getFullYear()
|
||||
)
|
||||
? 'numeric'
|
||||
: undefined,
|
||||
})}
|
||||
</h2>
|
||||
<div className="space-y-4">
|
||||
{grouped[date].map(prayer => (
|
||||
<div
|
||||
key={prayer.id}
|
||||
className="bg-white dark:bg-slate-800 rounded-lg p-6 shadow hover:shadow-lg transition-all cursor-pointer border border-slate-200 dark:border-slate-700"
|
||||
onClick={() => onPrayerClick(prayer)}
|
||||
>
|
||||
{prayer.prayFor && (
|
||||
<p className="text-sm font-medium text-blue-600 dark:text-blue-400 mb-2">
|
||||
Praying for: {prayer.prayFor}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-slate-900 dark:text-white line-clamp-3">
|
||||
{prayer.text}
|
||||
</p>
|
||||
<div className="mt-4 flex justify-between items-center">
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{new Date(date).toLocaleTimeString('en-US', {
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</span>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onEdit(prayer);
|
||||
}}
|
||||
className="text-xs px-3 py-1 bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 rounded hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { useTheme } from 'next-themes';
|
||||
|
||||
interface SettingsPageProps {
|
||||
userEmail?: string;
|
||||
}
|
||||
|
||||
export default function SettingsPage({ userEmail }: SettingsPageProps) {
|
||||
const { logout } = useAuth();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const [showConfirm, setShowConfirm] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-20 px-4 pb-8">
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Settings
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
Manage your preferences and account
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Settings Card */}
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 space-y-6">
|
||||
{/* Account Section */}
|
||||
<div className="border-b border-slate-200 dark:border-slate-700 pb-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
Account
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-600 dark:text-slate-400">Email</p>
|
||||
<p className="text-slate-900 dark:text-white">{userEmail || 'Not set'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Appearance Section */}
|
||||
<div className="border-b border-slate-200 dark:border-slate-700 pb-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
Appearance
|
||||
</h2>
|
||||
<div className="space-y-3">
|
||||
<p className="text-sm font-medium text-slate-600 dark:text-slate-400 mb-2">
|
||||
Theme
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{['light', 'dark', 'system'].map(t => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setTheme(t)}
|
||||
className={`px-4 py-2 rounded-lg font-medium transition-colors capitalize ${
|
||||
theme === t
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-slate-100 dark:bg-slate-700 text-slate-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600'
|
||||
}`}
|
||||
>
|
||||
{t === 'system' ? 'Auto' : t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* About Section */}
|
||||
<div className="border-b border-slate-200 dark:border-slate-700 pb-6">
|
||||
<h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">
|
||||
About
|
||||
</h2>
|
||||
<div className="space-y-2 text-sm text-slate-600 dark:text-slate-400">
|
||||
<p>Prayer Journal v1.0</p>
|
||||
<p>A simple, private space for your daily prayers and reflections.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logout Section */}
|
||||
<div>
|
||||
<button
|
||||
onClick={() => setShowConfirm(true)}
|
||||
className="w-full px-4 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Logout Confirmation Modal */}
|
||||
{showConfirm && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-xl p-6 max-w-sm w-full">
|
||||
<h2 className="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
||||
Logout?
|
||||
</h2>
|
||||
<p className="text-slate-600 dark:text-slate-400 mb-6">
|
||||
Are you sure you want to logout?
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setShowConfirm(false)}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-slate-200 dark:bg-slate-700 text-slate-900 dark:text-white font-medium hover:bg-slate-300 dark:hover:bg-slate-600 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => logout()}
|
||||
className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 transition-colors"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user