first commit

components/NavBar.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import Link from "next/link";
+import { signIn, signOut, useSession } from "next-auth/react";
+
+export default function NavBar() {
+  const { data } = useSession();
+  const isAdmin = data?.user?.role === "ADMIN";
+
+  return (
+    <header className="border-b border-slate-200/70 bg-white/80 backdrop-blur">
+      <div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-4">
+        <Link href="/" className="text-lg font-semibold text-slate-900">
+          Vereinskalender
+        </Link>
+        <nav className="flex items-center gap-4 text-sm">
+          {data?.user && (
+            <>
+              <Link href="/views" className="text-slate-700 hover:text-slate-900">
+                Meine Ansichten
+              </Link>
+              {isAdmin && (
+                <Link href="/admin" className="text-slate-700 hover:text-slate-900">
+                  Admin
+                </Link>
+              )}
+            </>
+          )}
+          {data?.user ? (
+            <button
+              type="button"
+              onClick={() => signOut()}
+              className="rounded bg-slate-900 px-3 py-1.5 text-white"
+            >
+              Logout
+            </button>
+          ) : (
+            <button
+              type="button"
+              onClick={() => signIn()}
+              className="rounded bg-brand-500 px-3 py-1.5 text-white"
+            >
+              Login
+            </button>
+          )}
+        </nav>
+      </div>
+    </header>
+  );
+}