2022-05-30 00:21:42 +00:00
|
|
|
import { type FunctionComponent, type PropsWithChildren } from "react";
|
2022-05-14 10:22:06 +00:00
|
|
|
import type { LinksFunction } from "@remix-run/node";
|
|
|
|
|
import { Link, Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, useCatch } from "@remix-run/react";
|
|
|
|
|
|
|
|
|
|
import Logo from "~/features/core/components/logo";
|
|
|
|
|
|
|
|
|
|
import styles from "./styles/tailwind.css";
|
|
|
|
|
|
2022-05-30 00:21:42 +00:00
|
|
|
export const links: LinksFunction = () => [{ rel: "stylesheet", href: styles }];
|
2022-05-14 10:22:06 +00:00
|
|
|
|
|
|
|
|
export default function App() {
|
|
|
|
|
return (
|
|
|
|
|
<Document>
|
|
|
|
|
<Outlet />
|
|
|
|
|
</Document>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// https://remix.run/docs/en/v1/api/conventions#errorboundary
|
|
|
|
|
export function ErrorBoundary({ error }: { error: Error }) {
|
|
|
|
|
console.error(error);
|
|
|
|
|
return (
|
|
|
|
|
<Document>
|
|
|
|
|
<div>
|
|
|
|
|
<h1>There was an error</h1>
|
|
|
|
|
<p>{error.message}</p>
|
|
|
|
|
</div>
|
|
|
|
|
</Document>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// https://remix.run/docs/en/v1/api/conventions#catchboundary
|
|
|
|
|
export function CatchBoundary() {
|
|
|
|
|
const caught = useCatch();
|
|
|
|
|
|
|
|
|
|
let message;
|
|
|
|
|
switch (caught.status) {
|
|
|
|
|
case 401:
|
|
|
|
|
message = <p>Oops! Looks like you tried to visit a page that you do not have access to.</p>;
|
|
|
|
|
break;
|
|
|
|
|
case 404:
|
|
|
|
|
message = <p>Oops! Looks like you tried to visit a page that does not exist.</p>;
|
|
|
|
|
break;
|
|
|
|
|
default:
|
|
|
|
|
throw new Error(caught.data || caught.statusText);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<Document>
|
|
|
|
|
<header>
|
|
|
|
|
<Link to="/">
|
|
|
|
|
<div className="p-4">
|
|
|
|
|
<Logo className="w-8" />
|
|
|
|
|
</div>
|
|
|
|
|
</Link>
|
|
|
|
|
</header>
|
|
|
|
|
<main>
|
|
|
|
|
<h1>
|
|
|
|
|
{caught.status}: {caught.statusText}
|
|
|
|
|
</h1>
|
|
|
|
|
{message}
|
|
|
|
|
</main>
|
|
|
|
|
</Document>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-30 00:21:42 +00:00
|
|
|
const Document: FunctionComponent<PropsWithChildren<{}>> = ({ children }) => (
|
2022-05-14 10:22:06 +00:00
|
|
|
<html lang="en" className="h-full">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charSet="utf-8" />
|
2022-05-30 00:21:42 +00:00
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
|
|
|
|
|
|
|
|
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
|
|
<meta name="apple-mobile-web-app-title" content="Shellphone" />
|
|
|
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
|
|
|
|
|
|
|
|
<meta name="mobile-web-app-capable" content="yes" />
|
|
|
|
|
<meta name="application-name" content="Shellphone" />
|
|
|
|
|
<meta name="theme-color" content="#F4F4F5" />
|
|
|
|
|
|
|
|
|
|
<meta name="msapplication-navbutton-color" content="#F4F4F5" />
|
|
|
|
|
<meta name="msapplication-starturl" content="/messages" />
|
|
|
|
|
<meta name="msapplication-TileColor" content="#F4F4F5" />
|
|
|
|
|
|
|
|
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png" />
|
|
|
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png" />
|
|
|
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png" />
|
|
|
|
|
<link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#F4F4F5" />
|
|
|
|
|
<link rel="manifest" href="/manifest.webmanifest" />
|
2022-05-14 10:22:06 +00:00
|
|
|
<Meta />
|
|
|
|
|
<Links />
|
|
|
|
|
</head>
|
|
|
|
|
<body className="h-full">
|
|
|
|
|
{children}
|
|
|
|
|
<ScrollRestoration />
|
|
|
|
|
<Scripts />
|
|
|
|
|
<LiveReload />
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
);
|
