website/app/root.tsx
2024-12-30 21:13:33 +01:00

141 lines
3.8 KiB
TypeScript

import type { LinksFunction } from "@remix-run/node";
import {
isRouteErrorResponse,
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
useRouteError,
} from "@remix-run/react";
import fonts from "@fontsource-variable/source-code-pro/wght.css?url";
import tailwind from "~/styles/tailwind.css?url";
import docsearch from "~/styles/docsearch.css?url";
import NotFoundPage from "~/components/NotFoundPage";
import Card from "~/components/Card";
import EmptyCard from "~/components/EmptyCard";
import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
import "decimal.js-light";
try {
Object.defineProperty(BigInt.prototype, "toJSON", {
get() {
"use strict";
return () => String(this);
},
});
} catch (e) {
console.warn("Unable to define toJSON on BigInt.prototype");
}
export const links: LinksFunction = () => [
{ rel: "stylesheet", href: tailwind },
{ rel: "stylesheet", href: docsearch },
{ rel: "stylesheet", href: fonts },
{ rel: "stylesheet", href: "/fonts/fonts.css" },
];
function App() {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" href="/favicon.png" />
<link
rel="preload"
href="/fonts/CircularXXWeb-Regular.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/fonts/CircularXXWeb-Bold.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/fonts/CircularXXWeb-Book.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/fonts/CircularXXWeb-Medium.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<Meta />
<Links />
<script
defer
data-domain="jetkvm.com"
data-api="https://thinkbeforeafter.cloudindex.workers.dev/api/occasion"
src="https://thinkbeforeafter.cloudindex.workers.dev/js/playwright.js"
></script>
</head>
<body>
<Outlet />
<ScrollRestoration />
<Scripts />
<a rel="me" className="hidden" href="https://mastodon.social/@jetkvm">
Mastodon
</a>
</body>
</html>
);
}
export function ErrorBoundary() {
const error = useRouteError();
// @ts-ignore
const errorMessage = error.data?.error?.message || error?.message;
if (isRouteErrorResponse(error)) {
if (error.status === 404) return <NotFoundPage />;
}
return (
<html>
<head>
<title>JetKVM</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<div className="h-full w-full">
<div className="flex h-full items-center justify-center">
<div className="w-full max-w-2xl">
<EmptyCard
IconElm={ExclamationTriangleIcon}
headline="Oh no!"
description="Something went wrong. Please try again later or contact support"
BtnElm={
errorMessage && (
<Card>
<div className="flex items-center font-mono">
<div className="flex p-2 text-black">
<span className="text-sm">{errorMessage}</span>
</div>
</div>
</Card>
)
}
/>
</div>
</div>
</div>
<Scripts />
</body>
</html>
);
}
export default App;