initial commit

frontend/src/components/Navbar.tsx

@@ -0,0 +1,72 @@
+import { Link } from 'react-router-dom'
+import { useAuth } from '@/hooks'
+
+export default function Navbar() {
+  const { user, isAuthenticated, login, logout } = useAuth()
+
+  return (
+    <nav className="border-b border-gray-200 bg-white shadow-sm">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="flex h-16 items-center justify-between">
+          {/* Logo / Brand */}
+          <div className="flex items-center">
+            <Link
+              to="/"
+              className="flex items-center gap-2 text-xl font-bold text-primary-600 hover:text-primary-700"
+            >
+              <svg
+                className="h-8 w-8"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+                />
+              </svg>
+              <span>Auth App</span>
+            </Link>
+          </div>
+
+          {/* Navigation Links */}
+          <div className="flex items-center gap-4">
+            {isAuthenticated ? (
+              <>
+                <Link
+                  to="/dashboard"
+                  className="rounded-md px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+                >
+                  Dashboard
+                </Link>
+                <div className="flex items-center gap-3">
+                  <span className="text-sm text-gray-600">
+                    Hello,{' '}
+                    <span className="font-medium text-gray-900">
+                      {user?.full_name || user?.preferred_username}
+                    </span>
+                  </span>
+                  <button
+                    onClick={logout}
+                    className="rounded-md bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200"
+                  >
+                    Logout
+                  </button>
+                </div>
+              </>
+            ) : (
+              <button
+                onClick={login}
+                className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-primary-700"
+              >
+                Login
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
+    </nav>
+  )
+}