feat: Implement Offline Status Indicator Component

src/components/Header.tsx

@@ -1,6 +1,6 @@
-//import Header from '@/components/Header';
 import { useAuth } from '@/contexts/AuthContext';
 import { ThemeToggle } from '@/components/ThemeToggle';
+import OfflineStatusIndicator from '@/components/OfflineStatusIndicator';
 import Link from 'next/link';
 
 export default function HeaderComponent() {
@@ -57,6 +57,7 @@ export default function HeaderComponent() {
               </>
             )}
             <li><ThemeToggle /></li>
+            <li><OfflineStatusIndicator /></li>
           </ul>
         </nav>
       </div>

src/components/OfflineStatusIndicator.tsx

@@ -0,0 +1,35 @@
+import { useOnlineStatus } from '@/hooks/useOnlineStatus';
+
+export default function OfflineStatusIndicator() {
+  const isOnline = useOnlineStatus();
+
+  const label = isOnline ? 'Connected to internet' : 'No internet connection — some features may be unavailable';
+  const tooltip = isOnline ? 'Online' : 'Offline';
+
+  return (
+    <div className="relative group" title={tooltip}>
+      <span
+        role="status"
+        aria-label={label}
+        aria-live="polite"
+        className={[
+          'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium border',
+          'transition-all duration-300',
+          isOnline
+            ? 'bg-green-50 border-green-300 text-green-700'
+            : 'bg-red-50 border-red-300 text-red-700 animate-pulse',
+        ].join(' ')}
+      >
+        <span
+          aria-hidden="true"
+          className={[
+            'w-2 h-2 rounded-full',
+            isOnline ? 'bg-green-500' : 'bg-red-500',
+          ].join(' ')}
+        />
+        <span className="sr-only">{label}</span>
+        <span aria-hidden="true">{isOnline ? 'Online' : 'Offline'}</span>
+      </span>
+    </div>
+  );
+}

src/hooks/useOnlineStatus.ts

@@ -0,0 +1,19 @@
+import { useState, useEffect } from 'react';
+
+export function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState(true);
+
+  useEffect(() => {
+    setIsOnline(navigator.onLine);
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => setIsOnline(false);
+    window.addEventListener('online', handleOnline);
+    window.addEventListener('offline', handleOffline);
+    return () => {
+      window.removeEventListener('online', handleOnline);
+      window.removeEventListener('offline', handleOffline);
+    };
+  }, []);
+
+  return isOnline;
+}