Initial commit

2026-05-19 22:20:29 +02:00
commit 0fbe856dce
173 changed files with 38316 additions and 0 deletions
@@ -0,0 +1,106 @@
+"use client";
+
+import { useSession, signOut } from "next-auth/react";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { NotificationBell } from "@/components/notifications/NotificationBell";
+import { getInitials } from "@/lib/utils";
+import { LogOut, User, Settings } from "lucide-react";
+import Link from "next/link";
+
+interface HeaderProps {
+  title?: string;
+  breadcrumbs?: { label: string; href?: string }[];
+}
+
+export function Header({ title, breadcrumbs }: HeaderProps) {
+  const { data: session } = useSession();
+  const user = session?.user;
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-950 px-6">
+      {/* Left: Title / Breadcrumbs */}
+      <div className="flex items-center gap-2 min-w-0">
+        {breadcrumbs ? (
+          <nav className="flex items-center gap-1.5 text-sm">
+            {breadcrumbs.map((crumb, i) => (
+              <span key={i} className="flex items-center gap-1.5">
+                {i > 0 && <span className="text-muted-foreground">/</span>}
+                {crumb.href ? (
+                  <Link
+                    href={crumb.href}
+                    className="text-muted-foreground hover:text-foreground transition-colors"
+                  >
+                    {crumb.label}
+                  </Link>
+                ) : (
+                  <span className="text-foreground font-medium truncate">
+                    {crumb.label}
+                  </span>
+                )}
+              </span>
+            ))}
+          </nav>
+        ) : (
+          title && (
+            <h1 className="text-sm font-semibold truncate">{title}</h1>
+          )
+        )}
+      </div>
+
+      {/* Right: Notifications + User menu */}
+      <div className="flex items-center gap-3">
+        <NotificationBell />
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <button className="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-secondary transition-colors">
+              <Avatar className="h-7 w-7">
+                {user?.image && <AvatarImage src={user.image} alt={user.name ?? ""} />}
+                <AvatarFallback className="text-xs">
+                  {getInitials(user?.name)}
+                </AvatarFallback>
+              </Avatar>
+              <div className="hidden sm:block text-left">
+                <p className="text-xs font-medium leading-none">{user?.name ?? user?.email}</p>
+                <p className="text-xs text-muted-foreground capitalize">
+                  {user?.role?.toLowerCase()}
+                </p>
+              </div>
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuLabel>
+              <p className="font-medium truncate">{user?.name}</p>
+              <p className="text-xs text-muted-foreground font-normal truncate">
+                {user?.email}
+              </p>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+              <Link href="/settings" className="flex items-center gap-2 cursor-pointer">
+                <Settings className="h-4 w-4" />
+                Settings
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              className="text-destructive focus:text-destructive cursor-pointer"
+              onClick={() => signOut({ callbackUrl: "/login" })}
+            >
+              <LogOut className="h-4 w-4 mr-2" />
+              Sign out
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}