add generic error pages

Tietokilta · Jan 23, 2024 · 6659c84 · 6659c84
1 parent d3df3e6
commit 6659c84
Show file tree

Hide file tree

Showing 3 changed files with 119 additions and 0 deletions.
diff --git a/apps/web/src/app/[lang]/error.tsx b/apps/web/src/app/[lang]/error.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { Button } from "@tietokilta/ui";
+
+export const metadata = {
+  title: "Jotain meni pieleen",
+  description: "Hups, jotain meni pieleen.",
+};
+
+// TODO: add i18n when next.js supports params in error pages https://github.com/vercel/next.js/discussions/43179
+
+function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <main className="relative mb-8 flex flex-col items-center gap-2 md:gap-6">
+      <header className="flex h-[15svh] w-full items-center justify-center bg-gray-900 text-gray-100 md:h-[25svh]">
+        <h1 className="font-mono text-4xl md:text-5xl">Jotain meni pieleen</h1>
+      </header>
+
+      <div className="relative m-auto flex max-w-prose flex-col gap-8 p-4 md:p-6">
+        <p className="shadow-solid max-w-prose rounded-md border-2 border-gray-900 p-4 md:p-6">
+          Oho, nyt meni jotain pieleen. Ota yhteyttä sivuston ylläpitäjään.
+          Virheen tunniste on <code className="font-mono">{error.digest}</code>.
+        </p>
+        <Button onClick={reset} type="button">
+          Yritä uudelleen
+        </Button>
+      </div>
+    </main>
+  );
+}
+
+export default Error;
diff --git a/apps/web/src/app/[lang]/global-error.tsx b/apps/web/src/app/[lang]/global-error.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { Button } from "@tietokilta/ui";
+
+export const metadata = {
+  title: "Tietokilta - Jotain meni pieleen",
+  description: "Hups, jotain meni pieleen.",
+};
+
+// TODO: add i18n when next.js supports params in global-error pages https://github.com/vercel/next.js/discussions/43179
+
+function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="fi">
+      <body className="font-sans">
+        <div className="flex min-h-screen flex-col">
+          <main className="relative mb-8 flex flex-col items-center gap-2 md:gap-6">
+            <header className="flex h-[15svh] w-full items-center justify-center bg-gray-900 text-gray-100 md:h-[25svh]">
+              <h1 className="font-mono text-4xl md:text-5xl">
+                Jotain meni pieleen
+              </h1>
+            </header>
+
+            <div className="relative m-auto flex max-w-prose flex-col gap-8 p-4 md:p-6">
+              <p className="shadow-solid max-w-prose rounded-md border-2 border-gray-900 p-4 md:p-6">
+                Oho, nyt meni jotain pahasti pieleen. Ota yhteyttä sivuston
+                ylläpitäjään. Virheen tunniste on{" "}
+                <code className="font-mono">{error.digest}</code>.
+              </p>
+              <Button onClick={reset} type="button">
+                Yritä uudelleen
+              </Button>
+            </div>
+          </main>
+        </div>
+      </body>
+    </html>
+  );
+}
+
+export default GlobalError;
diff --git a/apps/web/src/app/[lang]/not-found.tsx b/apps/web/src/app/[lang]/not-found.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import { Button } from "@tietokilta/ui";
+import Link from "next/link";
+
+export const metadata = {
+  title: "404 - Sivua ei löytynyt",
+  description: "Sivua ei löytynyt.",
+};
+
+// TODO: add i18n when next.js supports params in not-found pages https://github.com/vercel/next.js/discussions/43179
+
+function Page() {
+  return (
+    <main className="relative mb-8 flex flex-col items-center gap-2 md:gap-6">
+      <header className="flex h-[15svh] w-full items-center justify-center bg-gray-900 text-gray-100 md:h-[25svh]">
+        <h1 className="font-mono text-4xl md:text-5xl">
+          404 - Sivua ei löytynyt
+        </h1>
+      </header>
+
+      <div className="relative m-auto flex max-w-prose flex-col gap-8 p-4 md:p-6">
+        <p className="shadow-solid max-w-prose rounded-md border-2 border-gray-900 p-4 md:p-6">
+          Sivua ei löytynyt. Tarkista osoite tai palaa etusivulle.
+        </p>
+        <Button asChild variant="link">
+          <Link href="/">Etusivulle</Link>
+        </Button>
+      </div>
+    </main>
+  );
+}
+
+export default Page;