43 lines
1.4 KiB
JavaScript
Executable File
43 lines
1.4 KiB
JavaScript
Executable File
// File: frontend/app/(protected)/admin/layout.jsx
|
|
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Users, ShieldCheck } from 'lucide-react';
|
|
import { cn } from '@/lib/utils'; // ตรวจสอบว่า import cn มาจากที่ถูกต้อง
|
|
|
|
export default function AdminLayout({ children }) {
|
|
const pathname = usePathname();
|
|
|
|
const navLinks = [
|
|
{ href: '/admin/users', label: 'User Management', icon: Users },
|
|
{ href: '/admin/roles', label: 'Role & Permission', icon: ShieldCheck },
|
|
];
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Admin Settings</h1>
|
|
<p className="text-muted-foreground">Manage users, roles, and system permissions.</p>
|
|
</div>
|
|
<div className="flex border-b">
|
|
{navLinks.map(({ href, label, icon: Icon }) => (
|
|
<Link
|
|
key={href}
|
|
href={href}
|
|
className={cn(
|
|
'flex items-center gap-2 px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors',
|
|
pathname === href
|
|
? 'border-primary text-primary'
|
|
: 'border-transparent text-muted-foreground hover:text-foreground'
|
|
)}
|
|
>
|
|
<Icon className="h-4 w-4" />
|
|
{label}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
<div>{children}</div>
|
|
</div>
|
|
);
|
|
} |