93 lines
2.0 KiB
TypeScript
93 lines
2.0 KiB
TypeScript
import type { LinksFunction } from "@remix-run/node";
|
|
import {
|
|
Links,
|
|
Meta,
|
|
Outlet,
|
|
Scripts,
|
|
ScrollRestoration,
|
|
isRouteErrorResponse,
|
|
useRouteError
|
|
} 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 { Col, Container, Row } from "react-bootstrap";
|
|
|
|
function Document({
|
|
children,
|
|
title = "K-FRIDGE",
|
|
}: PropsWithChildren<{ title?: string}>) {
|
|
return (
|
|
<html lang="en" data-bs-theme="light">
|
|
<head>
|
|
<meta charSet="utf-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1"
|
|
/>
|
|
<Meta />
|
|
<Links />
|
|
</head>
|
|
<body>
|
|
{children}
|
|
<ScrollRestoration />
|
|
<Scripts />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|
|
|
|
export default function App() {
|
|
return (
|
|
<Document>
|
|
<Outlet></Outlet>
|
|
</Document>
|
|
);
|
|
}
|
|
|
|
export function ErrorBoundary() {
|
|
const error = useRouteError();
|
|
|
|
if (isRouteErrorResponse(error)) {
|
|
return (
|
|
<Document
|
|
title={`${error.status} ${error.statusText}`}
|
|
>
|
|
<Container>
|
|
<Row className="align-items-md-stretch">
|
|
<Col md={12}>
|
|
<div className="h-100 p-5 text-bg-dark rounded-3">
|
|
<h1>{error.status}</h1>
|
|
{error.statusText}
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</Document>
|
|
);
|
|
}
|
|
|
|
const errorMessage =
|
|
error instanceof Error
|
|
? error.message
|
|
: "Unknown error";
|
|
return (
|
|
<Document title="Uh-oh!">
|
|
<Container>
|
|
<Row className="align-items-md-stretch">
|
|
<Col md={12}>
|
|
<div className="h-100 p-5 text-bg-dark rounded-3">
|
|
<h1>App Error</h1>
|
|
{errorMessage}
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</Document>
|
|
);
|
|
} |