138 lines
3.6 KiB
TypeScript
138 lines
3.6 KiB
TypeScript
"use client";
|
||
|
||
import type React from "react";
|
||
import {
|
||
LayoutDashboard,
|
||
Download,
|
||
Layers,
|
||
Boxes,
|
||
Store,
|
||
Users,
|
||
Settings,
|
||
LucideMail,
|
||
} from "lucide-react";
|
||
import Link from "next/link";
|
||
|
||
type AdminLeftNavigationProps = {
|
||
collapsed: boolean;
|
||
onToggleCollapsed: () => void;
|
||
};
|
||
|
||
const navItems = [
|
||
{
|
||
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: "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 a Email",
|
||
href: "/admin/email/send",
|
||
icon: <LucideMail className="h-4 w-4" />,
|
||
},
|
||
];
|
||
|
||
export default function AdminLeftNavigation({
|
||
collapsed,
|
||
onToggleCollapsed,
|
||
}: 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">
|
||
{navItems.map((item) => (
|
||
<a
|
||
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>}
|
||
</a>
|
||
))}
|
||
</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>
|
||
);
|
||
}
|