From 6ab7ba35e340d65d2e21d43a632f331afde3b2aa Mon Sep 17 00:00:00 2001
From: nmemmert <nmemmert@users.noreply.github.com>
Date: Thu, 15 Jan 2026 14:12:32 -0500
Subject: [PATCH] feat: add live clock to dashboard

---
 src/components/Clock.tsx    | 37 +++++++++++++++++++++++++++++++++++++
 src/components/HomePage.tsx | 10 +++++++++-
 2 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Clock.tsx

diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
new file mode 100644
index 0000000..cedaf3d
--- /dev/null
+++ b/src/components/Clock.tsx
@@ -0,0 +1,37 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function Clock() {
+  const [time, setTime] = useState<string>('');
+
+  useEffect(() => {
+    // Set initial time
+    setTime(new Date().toLocaleTimeString('en-US', { 
+      hour: '2-digit', 
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: true 
+    }));
+
+    // Update time every second
+    const interval = setInterval(() => {
+      setTime(new Date().toLocaleTimeString('en-US', { 
+        hour: '2-digit', 
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: true 
+      }));
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="text-center">
+      <div className="text-6xl font-bold text-slate-900 dark:text-white font-mono tracking-tight">
+        {time || '--:--:--'}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/HomePage.tsx b/src/components/HomePage.tsx
index 6e1d6a0..500e938 100644
--- a/src/components/HomePage.tsx
+++ b/src/components/HomePage.tsx
@@ -1,5 +1,8 @@
 'use client';
 
+import { useState, useEffect } from 'react';
+import Clock from './Clock';
+
 interface Prayer {
   id: string;
   userId: string;
@@ -23,8 +26,13 @@ export default function HomePage({ prayers, todayCount, onStartPraying }: HomePa
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-24">
+      {/* Clock */}
+      <div className="max-w-md mx-auto mt-4 mb-8">
+        <Clock />
+      </div>
+
       {/* Header */}
-      <div className="max-w-md mx-auto mt-6 mb-8">
+      <div className="max-w-md mx-auto mb-8">
         <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">Prayer Journal</h1>
         <p className="text-slate-600 dark:text-slate-400">
           {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}