82 lines
3.0 KiB
TypeScript
82 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import type { ReactNode } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
type AdminShellProps = {
|
|
children: ReactNode;
|
|
userEmail: string;
|
|
signOutAction: (formData: FormData) => Promise<void>;
|
|
};
|
|
|
|
const navigation = [
|
|
{ label: "Dashboard", href: "/admin" },
|
|
{ label: "Categories", href: "/admin/categories" },
|
|
{ label: "Projects", href: "/admin/projects" },
|
|
{ label: "Apps", href: "/admin/projects?type=APP" },
|
|
{ label: "Melodies", href: "/admin/melodies" },
|
|
{ label: "Analytics", href: "/admin/analytics" },
|
|
{ label: "Media", active: false },
|
|
];
|
|
|
|
export default function AdminShell({ children, userEmail, signOutAction }: AdminShellProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground lg:grid lg:grid-cols-[16rem_minmax(0,1fr)]">
|
|
<aside className="border-b border-border bg-card lg:sticky lg:top-0 lg:h-screen lg:border-b-0 lg:border-e">
|
|
<div className="flex h-full flex-col gap-8 p-5 sm:p-6 lg:p-5">
|
|
<div>
|
|
<Link href="/admin" className="text-lg font-bold tracking-tight">
|
|
Diyaa Admin
|
|
</Link>
|
|
<p className="mt-1 text-sm text-muted-foreground">Content workspace</p>
|
|
</div>
|
|
|
|
<nav aria-label="Admin navigation" className="grid gap-1">
|
|
{navigation.map((item) =>
|
|
item.href ? (
|
|
<Link
|
|
key={item.label}
|
|
href={item.href ?? "/admin"}
|
|
className={
|
|
pathname === item.href.split("?")[0] || (item.href.split("?")[0] !== "/admin" && pathname.startsWith(`${item.href.split("?")[0]}/`))
|
|
? "rounded-md bg-accent px-3 py-2 text-sm font-medium text-accent-foreground"
|
|
: "rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
|
|
}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
) : (
|
|
<span
|
|
key={item.label}
|
|
aria-disabled="true"
|
|
className="flex cursor-not-allowed items-center justify-between rounded-md px-3 py-2 text-sm text-muted-foreground opacity-60"
|
|
>
|
|
{item.label}
|
|
<span className="text-xs">Soon</span>
|
|
</span>
|
|
),
|
|
)}
|
|
</nav>
|
|
|
|
<div className="mt-auto border-t border-border pt-5">
|
|
<p className="truncate text-sm text-muted-foreground" title={userEmail}>
|
|
{userEmail}
|
|
</p>
|
|
<form action={signOutAction} className="mt-3">
|
|
<Button type="submit" variant="outline" className="w-full">
|
|
Sign out
|
|
</Button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<main className="min-w-0 p-4 sm:p-6 lg:p-8">{children}</main>
|
|
</div>
|
|
);
|
|
}
|