80 lines
1.6 KiB
TypeScript
80 lines
1.6 KiB
TypeScript
import type { LinksFunction } from "@remix-run/node";
|
|
import {
|
|
Links,
|
|
Scripts,
|
|
Outlet,
|
|
useRouteError,
|
|
isRouteErrorResponse
|
|
} from "@remix-run/react";
|
|
import type { PropsWithChildren } from "react";
|
|
|
|
import stylesheet from "bootstrap/dist/css/bootstrap.min.css?url";
|
|
|
|
export const links: LinksFunction = () => [
|
|
{ rel: "stylesheet", href: stylesheet },
|
|
];
|
|
|
|
import Header from "~/components/header";
|
|
|
|
function Document({
|
|
children,
|
|
title = "K-FRIDGE",
|
|
}: PropsWithChildren<{ title?: string }>) {
|
|
return (
|
|
<html lang="en">
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1"
|
|
/>
|
|
<title>{title}</title>
|
|
<Links />
|
|
</head>
|
|
<body>
|
|
<Header></Header>
|
|
{children}
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<Document>
|
|
<Outlet />
|
|
</Document>
|
|
);
|
|
}
|
|
|
|
export function ErrorBoundary() {
|
|
const error = useRouteError();
|
|
|
|
if (isRouteErrorResponse(error)) {
|
|
return (
|
|
<Document
|
|
title={`${error.status} ${error.statusText}`}
|
|
>
|
|
<div className="error-container">
|
|
<h1>
|
|
{error.status} {error.statusText}
|
|
</h1>
|
|
</div>
|
|
</Document>
|
|
);
|
|
}
|
|
|
|
const errorMessage =
|
|
error instanceof Error
|
|
? error.message
|
|
: "Unknown error";
|
|
return (
|
|
<Document title="Uh-oh!">
|
|
<div className="error-container">
|
|
<h1>App Error</h1>
|
|
<pre>{errorMessage}</pre>
|
|
</div>
|
|
</Document>
|
|
);
|
|
} |