feat: add live clock to dashboard

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>
+  );
+}

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' })}