49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
|
import { Link, Outlet } from 'react-router-dom'
|
||
|
|
|
||
|
|
export function Layout() {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
|
||
|
|
<nav className="bg-white dark:bg-gray-800 shadow-sm">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="flex justify-between h-16">
|
||
|
|
<div className="flex items-center">
|
||
|
|
<Link to="/" className="text-xl font-bold">
|
||
|
|
Nuzlocke Tracker
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center space-x-4">
|
||
|
|
<Link
|
||
|
|
to="/games"
|
||
|
|
className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
|
||
|
|
>
|
||
|
|
Games
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
to="/rules"
|
||
|
|
className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
|
||
|
|
>
|
||
|
|
Rules
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
to="/dashboard"
|
||
|
|
className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
|
||
|
|
>
|
||
|
|
Dashboard
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
to="/encounters"
|
||
|
|
className="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-100 dark:hover:bg-gray-700"
|
||
|
|
>
|
||
|
|
Encounters
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
<main>
|
||
|
|
<Outlet />
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|