38 lines
1.4 KiB
TypeScript
38 lines
1.4 KiB
TypeScript
import { Outlet } from "react-router-dom";
|
|
import { useAdminSession } from "../hooks/useAdminSession";
|
|
import { AdminNavigation } from "./AdminNavigation";
|
|
import { ProductionBadge } from "./ProductionBadge";
|
|
|
|
export function AdminLayout() {
|
|
const { logout, operatorEmail } = useAdminSession();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground">
|
|
<div className="grid min-h-screen gap-6 lg:grid-cols-[260px_minmax(0,1fr)] p-6">
|
|
<aside className="rounded-[2rem] border border-border bg-card p-5 shadow-sm">
|
|
<div className="flex flex-col gap-4">
|
|
<ProductionBadge />
|
|
<div>
|
|
<p className="text-xs uppercase tracking-[0.25em] text-foreground/55">Operator</p>
|
|
<p className="mt-2 text-sm font-medium">{operatorEmail ?? "Unknown operator"}</p>
|
|
</div>
|
|
<AdminNavigation />
|
|
<form action="/__admin/logout" method="post">
|
|
<button
|
|
className="w-full rounded-2xl border border-border px-3 py-2 text-left text-sm font-medium text-foreground/75 hover:bg-black/5"
|
|
onClick={() => logout()}
|
|
type="submit"
|
|
>
|
|
Lock Admin App
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</aside>
|
|
|
|
<section className="rounded-[2rem] border border-border bg-card/80 p-6 shadow-sm">
|
|
<Outlet />
|
|
</section>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|