Fehlerseiten hinzugefügt

src/components/ErrorComponent.astro

@@ -0,0 +1,41 @@
+---
+// src/pages/404.astro
+import MainLayout from "../layouts/MainLayout.astro";
+import { getPath } from "../utils/paths";
+import { Icon } from "astro-icon/components";
+
+interface props {
+    title: string;
+}
+
+const { title = "404" } = Astro.props;
+---
+
+<div class="grid place-items-center min-h-[60vh] w-full error-component">
+    <div
+        class="w-full sm:max-w-lg bg-red-50 text-red-500 p-0 sm:rounded-lg sm:shadow border-b-2 sm:border-2 border-red-500 text-center"
+    >
+        <h1
+            class="bg-red-500 text-white text-4xl font-bold py-2 px-4 font-mono flex items-center justify-center gap-3"
+        >
+            <Icon name="tabler:alert-triangle" class="size-9" />
+            Fehler {title}
+        </h1>
+        <p class="mb-4 text-red-500 py-2 px-4 text-lg">
+            <slot />
+            <a
+                href={getPath("/")}
+                class="flex items-center justify-center gap-1 font-semibold text-red-500 hover:text-white hover:bg-red-500 rounded-full px-4 py-2 hover:drop-shadow transition-colors transition-[1s] mt-2"
+            >
+                <Icon name="tabler:arrow-big-left" class="size-5" />
+                Zurück zur Startseite
+            </a>
+        </p>
+    </div>
+</div>
+<style>
+    @reference "../styles/global.css";
+    .error-component :global(br) {
+        @apply mb-3;
+    }
+</style>