91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import Link from 'next/link'
|
|
import { usePathname } from 'next/navigation'
|
|
import { cn } from '@/lib/utils'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
LayoutDashboard,
|
|
Users,
|
|
Package,
|
|
ShoppingCart,
|
|
DollarSign,
|
|
Settings,
|
|
BarChart3,
|
|
CreditCard,
|
|
Tag,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Mail,
|
|
Star
|
|
} from 'lucide-react'
|
|
|
|
const navigation = [
|
|
{ name: 'Dashboard', href: '/admin', icon: LayoutDashboard },
|
|
{ name: 'Users', href: '/admin/users', icon: Users },
|
|
{ name: 'Products', href: '/admin/products', icon: Package },
|
|
{ name: 'Categories', href: '/admin/categories', icon: Tag },
|
|
{ name: 'Orders', href: '/admin/orders', icon: ShoppingCart },
|
|
{ name: 'Reviews', href: '/admin/reviews', icon: Star },
|
|
{ name: 'Form Responses', href: '/admin/forms', icon: Mail },
|
|
{ name: 'Commissions', href: '/admin/commissions', icon: DollarSign },
|
|
{ name: 'Payouts', href: '/admin/payouts', icon: CreditCard },
|
|
{ name: 'Analytics', href: '/admin/analytics', icon: BarChart3 },
|
|
{ name: 'Settings', href: '/admin/settings', icon: Settings },
|
|
]
|
|
|
|
export function AdminSidebar() {
|
|
const pathname = usePathname()
|
|
const [collapsed, setCollapsed] = useState(false)
|
|
|
|
return (
|
|
<div className={cn(
|
|
"bg-white border-r border-gray-200 transition-all duration-300",
|
|
collapsed ? "w-16" : "w-64"
|
|
)}>
|
|
<div className="flex h-full flex-col">
|
|
<div className="flex items-center justify-between p-4 border-b">
|
|
{!collapsed && (
|
|
<h2 className="text-lg font-semibold text-gray-900">Admin Panel</h2>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
{collapsed ? (
|
|
<ChevronRight className="h-4 w-4" />
|
|
) : (
|
|
<ChevronLeft className="h-4 w-4" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
<nav className="flex-1 space-y-1 p-4">
|
|
{navigation.map((item) => {
|
|
const isActive = pathname === item.href
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={cn(
|
|
"flex items-center rounded-lg px-3 py-2 text-sm font-medium transition-colors",
|
|
isActive
|
|
? "bg-blue-50 text-blue-700"
|
|
: "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
|
|
)}
|
|
title={collapsed ? item.name : undefined}
|
|
>
|
|
<item.icon className={cn("h-5 w-5", collapsed ? "mx-auto" : "mr-3")} />
|
|
{!collapsed && <span>{item.name}</span>}
|
|
</Link>
|
|
)
|
|
})}
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|