Julian Tabel
4fbfcf9b29
Replace incorrect perceived-brightness formula in Stats progress bars with proper WCAG relative luminance calculation, and convert type bar colors to hex values for reliable contrast detection. Add light: variant classes to status badges, yellow/purple text, and admin nav links across 17 files. Darken light-mode status-active token and text-tertiary/muted tokens. Add aria-labels to admin filter selects and flex-wrap for mobile overflow on AdminEvolutions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
import { NavLink, Outlet } from 'react-router-dom'
|
|
|
|
const navItems = [
|
|
{ to: '/admin/games', label: 'Games' },
|
|
{ to: '/admin/pokemon', label: 'Pokemon' },
|
|
{ to: '/admin/evolutions', label: 'Evolutions' },
|
|
{ to: '/admin/runs', label: 'Runs' },
|
|
{ to: '/admin/genlockes', label: 'Genlockes' },
|
|
]
|
|
|
|
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 flex-col sm:flex-row gap-6 sm:gap-8">
|
|
<nav className="flex-shrink-0 sm:w-48">
|
|
<ul className="flex sm:flex-col gap-1 overflow-x-auto sm:overflow-visible">
|
|
{navItems.map((item) => (
|
|
<li key={item.to} className="flex-shrink-0">
|
|
<NavLink
|
|
to={item.to}
|
|
className={({ isActive }) =>
|
|
`block px-3 py-2 rounded-md text-sm font-medium whitespace-nowrap ${
|
|
isActive
|
|
? 'bg-accent-900/40 text-accent-300 light:bg-accent-100 light:text-accent-700'
|
|
: 'hover:bg-surface-2'
|
|
}`
|
|
}
|
|
>
|
|
{item.label}
|
|
</NavLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
<div className="flex-1 min-w-0">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|