Complete authentication and event management frontend

2026-04-03 21:29:09 +02:00
parent e6430e855b
commit 924c5c8420
3 changed files with 76 additions and 11 deletions
@@ -0,0 +1,56 @@
+'use client';
+
+import { useAuth } from '@/lib/auth-context';
+
+export function Navigation() {
+  const { user, logout, isAuthenticated } = useAuth();
+
+  return (
+    <nav className="bg-white shadow-sm border-b">
+      <div className="max-w-7xl mx-auto px-4">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center gap-8">
+            <a href="/" className="text-xl font-bold text-blue-600">
+              RacePlanner
+            </a>
+            <a href="/events" className="text-gray-700 hover:text-blue-600">
+              Events
+            </a>
+          </div>
+
+          <div className="flex items-center gap-4">
+            {isAuthenticated ? (
+              <>
+                <a href="/dashboard" className="text-gray-700 hover:text-blue-600">
+                  Dashboard
+                </a>
+                <a href="/registrations" className="text-gray-700 hover:text-blue-600">
+                  My Registrations
+                </a>
+                <span className="text-sm text-gray-500">{user?.name}</span>
+                <button
+                  onClick={logout}
+                  className="px-4 py-2 text-sm text-red-600 hover:text-red-700"
+                >
+                  Logout
+                </button>
+              </>
+            ) : (
+              <>
+                <a href="/login" className="text-gray-700 hover:text-blue-600">
+                  Login
+                </a>
+                <a
+                  href="/register"
+                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm"
+                >
+                  Register
+                </a>
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}