Initial commit

app/error.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useEffect } from "react";
+import Link from "next/link";
+import styles from "./error.module.css";
+import {
+  ArrowCounterClockwiseIcon,
+  ArrowLeftIcon,
+} from "@phosphor-icons/react/dist/ssr";
+
+interface ErrorProps {
+  error: Error & { digest?: string };
+  reset: () => void;
+}
+
+export default function Error({ error, reset }: ErrorProps) {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <main className={styles.wrapper}>
+      <span className={styles.ghost} aria-hidden="true">
+        500
+      </span>
+
+      <div className={styles.content}>
+        <p className={styles.label}>Serverfehler</p>
+        <h1 className={styles.heading}>Etwas ist schiefgelaufen</h1>
+        <p className={styles.description}>
+          Ein unerwarteter Fehler ist aufgetreten. Bitte versuche es erneut oder
+          komm später zurück.
+        </p>
+
+        <div className={styles.actions}>
+          <button
+            type="button"
+            onClick={reset}
+            className={`btn btn--filled ${styles.cta}`}
+          >
+            <ArrowCounterClockwiseIcon className="btn-icon" size={18} />
+            Erneut versuchen
+          </button>
+
+          <Link href="/" className={`btn btn--outline ${styles.cta}`}>
+            <ArrowLeftIcon className="btn-icon" size={18} />
+            Zurück zur Startseite
+          </Link>
+        </div>
+      </div>
+    </main>
+  );
+}