import {
Link,
Links,
LiveReload,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useCatch,
} from "remix";
import type { LinksFunction } from "remix";
import globalStylesUrl from "~/styles/global.css";
import darkStylesUrl from "~/styles/dark.css";
// https://remix.run/api/app#links
export let links: LinksFunction = () => {
return [
{ rel: "stylesheet", href: globalStylesUrl },
{
rel: "stylesheet",
href: darkStylesUrl,
media: "(prefers-color-scheme: dark)",
},
];
};
// https://remix.run/api/conventions#default-export
// https://remix.run/api/conventions#route-filenames
export default function App() {
return (
);
}
// https://remix.run/docs/en/v1/api/conventions#errorboundary
export function ErrorBoundary({ error }: { error: Error }) {
console.error(error);
return (
There was an error
{error.message}
Hey, developer, you should replace this with what you want your
users to see.
);
}
// https://remix.run/docs/en/v1/api/conventions#catchboundary
export function CatchBoundary() {
let caught = useCatch();
console.log('caught', caught);
let message;
switch (caught.status) {
case 401:
message = (
Oops! Looks like you tried to visit a page that you do not have access
to.
);
break;
case 404:
message = (
Oops! Looks like you tried to visit a page that does not exist.
);
break;
default:
throw new Error(caught.data || caught.statusText);
}
return (
{caught.status}: {caught.statusText}
{message}
);
}
function Document({
children,
title,
}: {
children: React.ReactNode;
title?: string;
}) {
return (
{title ? {title} : null}
{children}
{process.env.NODE_ENV === "development" && }
);
}
function Layout({ children }: { children: React.ReactNode }) {
return (
);
}
function RemixLogo() {
return (
);
}