109 lines
3.9 KiB
TypeScript
109 lines
3.9 KiB
TypeScript
"use client";
|
||
|
||
import type React from "react";
|
||
import Link from "next/link";
|
||
import {
|
||
LayoutDashboard,
|
||
Download,
|
||
Layers,
|
||
Boxes,
|
||
Store,
|
||
Users,
|
||
Settings,
|
||
LucideMail,
|
||
Wand2,
|
||
} from "lucide-react";
|
||
|
||
export type AdminNavItem = {
|
||
label: string;
|
||
href: string;
|
||
icon: React.ReactNode;
|
||
};
|
||
|
||
type AdminLeftNavigationProps = {
|
||
collapsed: boolean;
|
||
onToggleCollapsed: () => void;
|
||
items?: AdminNavItem[]; // ✅ NEW
|
||
};
|
||
|
||
const defaultNavItems: AdminNavItem[] = [
|
||
{ label: "Dashboard", href: "/admin", icon: <LayoutDashboard className="h-4 w-4" /> },
|
||
{ label: "Imports", href: "/admin/import-status", icon: <Download className="h-4 w-4" /> },
|
||
{ label: "Mappings", href: "/admin/mapping", icon: <Layers className="h-4 w-4" /> },
|
||
{ label: "Products", href: "/admin/products", icon: <Boxes className="h-4 w-4" /> },
|
||
{ label: "Merchants", href: "/admin/merchants", icon: <Store className="h-4 w-4" /> },
|
||
{ label: "Platforms", href: "/admin/platforms", icon: <Layers className="h-4 w-4" /> },
|
||
{ label: "Enrichment", href: "/admin/enrichment", icon: <Wand2 className="h-4 w-4" /> },
|
||
{ label: "Users", href: "/admin/users", icon: <Users className="h-4 w-4" /> },
|
||
{ label: "Settings", href: "/admin/settings", icon: <Settings className="h-4 w-4" /> },
|
||
{ label: "Manage Emails", href: "/admin/email/manage", icon: <LucideMail className="h-4 w-4" /> },
|
||
{ label: "Send an Email", href: "/admin/email/send", icon: <LucideMail className="h-4 w-4" /> },
|
||
{ label: "Beta Invites", href: "/admin/beta-invites", icon: <LucideMail className="h-4 w-4" />,
|
||
},
|
||
];
|
||
|
||
export default function AdminLeftNavigation({
|
||
collapsed,
|
||
onToggleCollapsed,
|
||
items = defaultNavItems, // ✅ NEW default
|
||
}: AdminLeftNavigationProps) {
|
||
return (
|
||
<aside
|
||
className={`hidden border-r border-zinc-900 bg-zinc-950/80 px-3 py-6 md:flex md:flex-col transition-all duration-200 ${
|
||
collapsed ? "w-16" : "w-60"
|
||
}`}
|
||
>
|
||
<div className="mb-6 flex items-center gap-2">
|
||
<button
|
||
type="button"
|
||
onClick={onToggleCollapsed}
|
||
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-800 bg-zinc-950 text-zinc-400 transition hover:border-amber-400/60 hover:text-amber-300"
|
||
>
|
||
<span className="sr-only">Toggle sidebar</span>
|
||
<div className="space-y-0.5">
|
||
<span className="block h-[1px] w-3 bg-current" />
|
||
<span className="block h-[1px] w-3 bg-current" />
|
||
<span className="block h-[1px] w-3 bg-current" />
|
||
</div>
|
||
</button>
|
||
|
||
{!collapsed && (
|
||
<div>
|
||
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500">
|
||
<Link href="/" title="Back to Battl Dashboard">
|
||
Battl Builders
|
||
</Link>
|
||
</p>
|
||
<p className="text-[10px] text-zinc-600">Admin Command</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<nav className="flex-1 space-y-1 text-sm">
|
||
{items.map((item) => (
|
||
<Link
|
||
key={item.href}
|
||
href={item.href}
|
||
className="flex items-center justify-between rounded-md px-2 py-1.5 text-zinc-300 transition hover:bg-zinc-900 hover:text-amber-300"
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
{item.icon}
|
||
{!collapsed && <span>{item.label}</span>}
|
||
</div>
|
||
{!collapsed && <span className="text-[10px] text-zinc-600">›</span>}
|
||
</Link>
|
||
))}
|
||
</nav>
|
||
|
||
{!collapsed && (
|
||
<div className="mt-6 border-t border-zinc-900 pt-4 text-[11px] text-zinc-600">
|
||
<p className="text-[10px] uppercase tracking-[0.16em] text-zinc-500">Status</p>
|
||
<p className="mt-1">
|
||
Import engine: <span className="text-emerald-400">online</span>
|
||
</p>
|
||
<p className="text-zinc-500">Builder UI: in progress</p>
|
||
</div>
|
||
)}
|
||
</aside>
|
||
);
|
||
} |