40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
type Props = {
|
|
username?: string;
|
|
isAdmin?: boolean;
|
|
};
|
|
|
|
export function AdminHeader({ username, isAdmin = false }: Props) {
|
|
async function logout() {
|
|
await fetch("/api/auth/logout", { method: "POST" });
|
|
window.location.href = "/login";
|
|
}
|
|
|
|
return (
|
|
<header className="flex flex-wrap items-center justify-between gap-4 border-b border-zinc-200 bg-white px-6 py-4 dark:border-zinc-800 dark:bg-zinc-950">
|
|
<div>
|
|
<h1 className="text-lg font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
|
|
Kick Kings Admin Dashboard
|
|
</h1>
|
|
{username ? (
|
|
<p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
|
|
Signed in as{" "}
|
|
<span className="font-medium text-zinc-700 dark:text-zinc-300">
|
|
{username}
|
|
</span>
|
|
{isAdmin ? " · admin" : null}
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => void logout()}
|
|
className="rounded-lg border border-zinc-300 bg-white px-4 py-2 text-sm font-medium text-zinc-800 shadow-sm transition hover:bg-zinc-50 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-100 dark:hover:bg-zinc-800"
|
|
>
|
|
Log out
|
|
</button>
|
|
</header>
|
|
);
|
|
}
|