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
2026-01-15 13:44:07 -05:00
1 parent b032d14673
commit a5390e22be
@@ -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>
+  );
+}