diff options
Diffstat (limited to 'app/root.tsx')
| -rw-r--r-- | app/root.tsx | 36 |
1 files changed, 30 insertions, 6 deletions
diff --git a/app/root.tsx b/app/root.tsx index 2c88ff1..5d66876 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -1,5 +1,6 @@ import { isRouteErrorResponse, + Link, Links, Meta, Outlet, @@ -25,7 +26,7 @@ export const links: Route.LinksFunction = () => [ export function Layout({ children }: { children: React.ReactNode }) { return ( - <html lang="en" className="dark"> + <html lang="ja" className="dark"> <head> <meta charSet="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> @@ -43,7 +44,30 @@ export function Layout({ children }: { children: React.ReactNode }) { } export default function App() { - return <Outlet />; + return ( + <> + <nav className="border-b border-gray-800"> + <div className="max-w-3xl mx-auto px-4 py-3 flex items-center gap-6"> + <Link to="/" className="font-bold text-white tracking-tight"> + whois.band + </Link> + <Link + to="/bands/new" + className="text-sm text-gray-400 hover:text-white transition-colors" + > + + Band + </Link> + <Link + to="/artists/new" + className="text-sm text-gray-400 hover:text-white transition-colors" + > + + Artist + </Link> + </div> + </nav> + <Outlet /> + </> + ); } export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { @@ -63,11 +87,11 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) { } return ( - <main className="pt-16 p-4 container mx-auto"> - <h1>{message}</h1> - <p>{details}</p> + <main className="max-w-3xl mx-auto px-4 py-16"> + <h1 className="text-2xl font-bold">{message}</h1> + <p className="mt-2 text-gray-400">{details}</p> {stack && ( - <pre className="w-full p-4 overflow-x-auto"> + <pre className="mt-4 w-full p-4 overflow-x-auto bg-gray-900 rounded text-sm"> <code>{stack}</code> </pre> )} |