Julian Tabel
512d1bfce5
Add Tailwind v4 @theme tokens for surfaces, accents, text, borders, and status colors. Self-host Geist Sans/Mono variable fonts. Redesign nav with backdrop blur and active states, home page with gradient hero. Migrate all 50+ components from ad-hoc gray/blue Tailwind classes to semantic theme tokens (surface-*, text-*, border-*, accent-*, status-*). 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-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-200'
|
|
: 'hover:bg-surface-2'
|
|
}`
|
|
}
|
|
>
|
|
{item.label}
|
|
</NavLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
<div className="flex-1 min-w-0">
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|