feat: upgrade UI with advanced modern design - glassmorphism, gradients, animations
This commit is contained in:
nmemmert committed
1 parent
b013e972d2
commit
ddad533c81
2 files changed
+154
-106
No files matched your search
@@ -36,16 +36,23 @@ export default function DailyEntry({
|
||||
}: DailyEntryProps) {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
const isToday = date === today;
|
||||
const wordCount = text.split(/\s+/).filter(w => w).length;
|
||||
|
||||
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="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 pt-20 px-4 pb-8">
|
||||
{/* Animated Background */}
|
||||
<div className="fixed inset-0 -z-10">
|
||||
<div className="absolute top-40 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
|
||||
<div className="absolute bottom-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
|
||||
</div>
|
||||
|
||||
<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'}
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
|
||||
{isToday ? "✍️ Today's Prayer" : '📝 Prayer Entry'}
|
||||
</h1>
|
||||
<p className="text-slate-600 dark:text-slate-400">
|
||||
<p className="text-slate-400 text-lg">
|
||||
{new Date(date).toLocaleDateString('en-US', {
|
||||
weekday: 'long',
|
||||
year: 'numeric',
|
||||
@@ -59,65 +66,61 @@ export default function DailyEntry({
|
||||
<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>
|
||||
<label className="block text-sm font-semibold text-slate-300 mb-3">📅 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"
|
||||
className="w-full px-4 py-3 rounded-xl bg-slate-800/60 backdrop-blur-xl border border-slate-700/50 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 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>
|
||||
<label className="block text-sm font-semibold text-slate-300 mb-3">🙏 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"
|
||||
className="w-full px-4 py-3 rounded-xl bg-slate-800/60 backdrop-blur-xl border border-slate-700/50 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 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>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<label className="block text-sm font-semibold text-slate-300">💬 Your Prayer</label>
|
||||
<span className="text-xs text-slate-500">{wordCount} words</span>
|
||||
</div>
|
||||
<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"
|
||||
className="w-full px-4 py-3 rounded-xl bg-slate-800/60 backdrop-blur-xl border border-slate-700/50 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all resize-none font-serif"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Answered Checkbox */}
|
||||
<div className="flex items-center gap-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="answered"
|
||||
checked={answered}
|
||||
onChange={(e) => onAnsweredChange?.(e.target.checked)}
|
||||
className="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
|
||||
/>
|
||||
<label htmlFor="answered" className="font-semibold text-slate-700 dark:text-slate-300 cursor-pointer">
|
||||
Mark as answered
|
||||
<div className="bg-slate-800/40 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={answered}
|
||||
onChange={(e) => onAnsweredChange?.(e.target.checked)}
|
||||
className="w-5 h-5 rounded border-slate-600 bg-slate-700 text-green-500 focus:ring-green-500 cursor-pointer"
|
||||
/>
|
||||
<span className="font-semibold text-slate-300">✅ Mark as answered</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{/* Answer Details */}
|
||||
{answered && (
|
||||
<div>
|
||||
<label htmlFor="answerDetails" className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
|
||||
How was it answered?
|
||||
<div className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 animate-in fade-in-50 duration-300">
|
||||
<label htmlFor="answerDetails" className="block text-sm font-semibold text-green-400 mb-3">
|
||||
✨ How was it answered?
|
||||
</label>
|
||||
<textarea
|
||||
id="answerDetails"
|
||||
@@ -125,7 +128,7 @@ export default function DailyEntry({
|
||||
onChange={(e) => onAnswerDetailsChange?.(e.target.value)}
|
||||
placeholder="Share how God answered this prayer..."
|
||||
rows={4}
|
||||
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-green-500 focus:border-transparent transition-all resize-none font-serif"
|
||||
className="w-full px-4 py-3 rounded-xl bg-slate-800/60 backdrop-blur-xl border border-green-500/30 text-white placeholder-slate-500 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all resize-none font-serif"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -134,16 +137,11 @@ export default function DailyEntry({
|
||||
<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"
|
||||
className="w-full bg-gradient-to-r from-blue-600 via-blue-500 to-purple-600 hover:from-blue-700 hover:via-blue-600 hover:to-purple-700 disabled:from-slate-600 disabled:to-slate-600 text-white font-bold py-4 px-6 rounded-xl transition-all duration-200 disabled:cursor-not-allowed shadow-lg hover:shadow-2xl transform hover:scale-105 border border-blue-400/30 disabled:border-slate-400/30"
|
||||
>
|
||||
{loading ? 'Saving...' : isEditing ? 'Update Prayer' : 'Save Prayer'}
|
||||
{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>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user