127 lines
4.3 KiB
TypeScript
127 lines
4.3 KiB
TypeScript
import { hasPermission, type Permission, type PermissionScope, type Role } from "@cms/content/rbac"
|
|
import Link from "next/link"
|
|
import type { ReactNode } from "react"
|
|
|
|
import { LogoutButton } from "@/app/logout-button"
|
|
import { AdminLocaleSwitcher } from "@/components/admin-locale-switcher"
|
|
import { getBuildInfo } from "@/lib/build-info"
|
|
|
|
type AdminShellProps = {
|
|
role: Role
|
|
activePath: string
|
|
badge: string
|
|
title: string
|
|
description: string
|
|
actions?: ReactNode
|
|
children: ReactNode
|
|
}
|
|
|
|
type NavItem = {
|
|
href: string
|
|
label: string
|
|
permission: Permission
|
|
scope: PermissionScope
|
|
}
|
|
|
|
const navItems: NavItem[] = [
|
|
{ href: "/", label: "Dashboard", permission: "dashboard:read", scope: "global" },
|
|
{ href: "/pages", label: "Pages", permission: "pages:read", scope: "team" },
|
|
{ href: "/navigation", label: "Navigation", permission: "navigation:read", scope: "team" },
|
|
{ href: "/media", label: "Media", permission: "media:read", scope: "team" },
|
|
{ href: "/portfolio", label: "Portfolio", permission: "media:read", scope: "team" },
|
|
{ href: "/users", label: "Users", permission: "users:read", scope: "own" },
|
|
{ href: "/commissions", label: "Commissions", permission: "commissions:read", scope: "own" },
|
|
{ href: "/settings", label: "Settings", permission: "users:manage_roles", scope: "global" },
|
|
{ href: "/todo", label: "Roadmap", permission: "roadmap:read", scope: "global" },
|
|
]
|
|
|
|
function navItemClass(active: boolean): string {
|
|
if (active) {
|
|
return "bg-neutral-900 text-white border-neutral-900"
|
|
}
|
|
|
|
return "bg-white text-neutral-700 border-neutral-300 hover:bg-neutral-100"
|
|
}
|
|
|
|
function isActiveRoute(activePath: string, href: string): boolean {
|
|
if (href === "/") {
|
|
return activePath === "/"
|
|
}
|
|
|
|
return activePath === href || activePath.startsWith(`${href}/`)
|
|
}
|
|
|
|
export function AdminShell({
|
|
role,
|
|
activePath,
|
|
badge,
|
|
title,
|
|
description,
|
|
actions,
|
|
children,
|
|
}: AdminShellProps) {
|
|
const buildInfo = getBuildInfo()
|
|
|
|
return (
|
|
<div className="mx-auto flex min-h-screen w-full max-w-7xl gap-8 px-6 py-10">
|
|
<aside className="sticky top-0 hidden h-fit w-64 shrink-0 space-y-4 lg:block">
|
|
<div className="rounded-xl border border-neutral-200 bg-white p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-neutral-500">
|
|
CMS Admin
|
|
</p>
|
|
<p className="mt-2 text-sm text-neutral-600">Role: {role}</p>
|
|
</div>
|
|
|
|
<nav className="space-y-2">
|
|
{navItems
|
|
.filter((item) => hasPermission(role, item.permission, item.scope))
|
|
.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={`block rounded-md border px-3 py-2 text-sm font-medium ${navItemClass(isActiveRoute(activePath, item.href))}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</aside>
|
|
|
|
<div className="min-w-0 flex-1 space-y-8">
|
|
<nav className="flex flex-wrap gap-2 lg:hidden">
|
|
{navItems
|
|
.filter((item) => hasPermission(role, item.permission, item.scope))
|
|
.map((item) => (
|
|
<Link
|
|
key={`mobile-${item.href}`}
|
|
href={item.href}
|
|
className={`rounded-md border px-3 py-2 text-sm font-medium ${navItemClass(isActiveRoute(activePath, item.href))}`}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
|
|
<header className="space-y-3">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{badge}</p>
|
|
<div className="flex items-center gap-2">
|
|
<AdminLocaleSwitcher />
|
|
<LogoutButton />
|
|
</div>
|
|
</div>
|
|
<h1 className="text-4xl font-semibold tracking-tight">{title}</h1>
|
|
<p className="text-neutral-600">{description}</p>
|
|
{actions ? <div className="flex flex-wrap items-center gap-3 pt-1">{actions}</div> : null}
|
|
</header>
|
|
|
|
{children}
|
|
|
|
<footer className="border-t border-neutral-200 pt-4 text-xs text-neutral-500">
|
|
Build v{buildInfo.version} +sha.{buildInfo.sha}
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|