122 lines
4.2 KiB
TypeScript
122 lines
4.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
import { useAuth } from "@/hooks/useAuth";
|
|
import { cn } from "@/lib/utils";
|
|
import {
|
|
LayoutDashboard,
|
|
Calendar,
|
|
FileText,
|
|
Shield,
|
|
Tag,
|
|
Users,
|
|
Radio,
|
|
Settings,
|
|
Wrench,
|
|
LogOut,
|
|
ArrowLeft,
|
|
Inbox,
|
|
ImageIcon,
|
|
HelpCircle,
|
|
} from "lucide-react";
|
|
|
|
const navItems = [
|
|
{ href: "/admin/overview", label: "Overview", icon: LayoutDashboard, adminOnly: false },
|
|
{ href: "/admin/events", label: "Events", icon: Calendar, adminOnly: false },
|
|
{ href: "/admin/gallery", label: "Gallery", icon: ImageIcon, adminOnly: false },
|
|
{ href: "/admin/blog", label: "Blog", icon: FileText, adminOnly: false },
|
|
{ href: "/admin/faq", label: "FAQ", icon: HelpCircle, adminOnly: false },
|
|
{ href: "/admin/submissions", label: "Submissions", icon: Inbox, adminOnly: false },
|
|
{ href: "/admin/moderation", label: "Moderation", icon: Shield, adminOnly: false },
|
|
{ href: "/admin/categories", label: "Categories", icon: Tag, adminOnly: false },
|
|
{ href: "/admin/users", label: "Users", icon: Users, adminOnly: true },
|
|
{ href: "/admin/relays", label: "Relays", icon: Radio, adminOnly: true },
|
|
{ href: "/admin/settings", label: "Settings", icon: Settings, adminOnly: true },
|
|
{ href: "/admin/nostr", label: "Nostr Tools", icon: Wrench, adminOnly: true },
|
|
];
|
|
|
|
export function AdminSidebar() {
|
|
const pathname = usePathname();
|
|
const { user, logout, isAdmin } = useAuth();
|
|
|
|
const shortPubkey = user?.pubkey
|
|
? `${user.pubkey.slice(0, 8)}...${user.pubkey.slice(-8)}`
|
|
: "";
|
|
|
|
return (
|
|
<aside className="w-64 bg-surface-container-lowest min-h-screen p-6 flex flex-col shrink-0">
|
|
<div className="mb-8">
|
|
<Link href="/" className="text-primary-container font-bold text-xl">
|
|
BBE Admin
|
|
</Link>
|
|
</div>
|
|
|
|
{!user ? (
|
|
<div className="flex-1 flex items-center justify-center">
|
|
<p className="text-on-surface/40 text-sm text-center">
|
|
Please log in to access the dashboard.
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div className="mb-6">
|
|
<p className="text-on-surface/70 text-sm font-mono truncate">{shortPubkey}</p>
|
|
<span
|
|
className={cn(
|
|
"inline-block mt-1 rounded-full px-3 py-1 text-xs font-bold",
|
|
user.role === "ADMIN"
|
|
? "bg-primary-container/20 text-primary"
|
|
: "bg-secondary-container text-on-secondary-container"
|
|
)}
|
|
>
|
|
{user.role}
|
|
</span>
|
|
</div>
|
|
|
|
<nav className="flex-1 space-y-1">
|
|
{navItems
|
|
.filter((item) => !item.adminOnly || isAdmin)
|
|
.map((item) => {
|
|
const Icon = item.icon;
|
|
const active = pathname === item.href;
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center gap-3 px-4 py-3 rounded-lg transition-colors",
|
|
active
|
|
? "bg-surface-container-high text-primary"
|
|
: "text-on-surface/70 hover:text-on-surface hover:bg-surface-container"
|
|
)}
|
|
>
|
|
<Icon size={20} />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="mt-auto space-y-2 pt-6">
|
|
<button
|
|
onClick={logout}
|
|
className="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface/70 hover:text-on-surface hover:bg-surface-container w-full"
|
|
>
|
|
<LogOut size={20} />
|
|
<span>Logout</span>
|
|
</button>
|
|
<Link
|
|
href="/"
|
|
className="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors text-on-surface/70 hover:text-on-surface hover:bg-surface-container"
|
|
>
|
|
<ArrowLeft size={20} />
|
|
<span>Back to site</span>
|
|
</Link>
|
|
</div>
|
|
</>
|
|
)}
|
|
</aside>
|
|
);
|
|
}
|