40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
|
import { NavLink, Outlet } from 'react-router-dom'
|
||
|
|
|
||
|
|
const navItems = [
|
||
|
|
{ to: '/admin/games', label: 'Games' },
|
||
|
|
{ to: '/admin/pokemon', label: 'Pokemon' },
|
||
|
|
]
|
||
|
|
|
||
|
|
export function AdminLayout() {
|
||
|
|
return (
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||
|
|
<h1 className="text-2xl font-bold mb-6">Admin Panel</h1>
|
||
|
|
<div className="flex gap-8">
|
||
|
|
<nav className="w-48 flex-shrink-0">
|
||
|
|
<ul className="space-y-1">
|
||
|
|
{navItems.map((item) => (
|
||
|
|
<li key={item.to}>
|
||
|
|
<NavLink
|
||
|
|
to={item.to}
|
||
|
|
className={({ isActive }) =>
|
||
|
|
`block px-3 py-2 rounded-md text-sm font-medium ${
|
||
|
|
isActive
|
||
|
|
? 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
|
||
|
|
: 'hover:bg-gray-100 dark:hover:bg-gray-700'
|
||
|
|
}`
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{item.label}
|
||
|
|
</NavLink>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<Outlet />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|