From c0919670ca784ca5818509a9560f9fb3bd348e91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20Erbsh=C3=A4u=C3=9Fer?= <tobias@tesoft.dev>
Date: Sun, 24 May 2026 09:22:47 +0200
Subject: [PATCH] add error component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>
---
 frontend/src/components/error.njk | 44 +++++++++++++++++++++++++++++++
 frontend/src/components/error.ts  | 15 +++++++++++
 2 files changed, 59 insertions(+)
 create mode 100644 frontend/src/components/error.njk
 create mode 100644 frontend/src/components/error.ts

diff --git a/frontend/src/components/error.njk b/frontend/src/components/error.njk
new file mode 100644
index 0000000..672cb3b
--- /dev/null
+++ b/frontend/src/components/error.njk
@@ -0,0 +1,44 @@
+<template id="tesoft-error-template">
+    <style>
+        @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        :host > div {
+            align-items: center;
+            display: grid;
+            gap: 1.6rem;
+            grid-template-columns: auto 1fr;
+            grid-template-rows: auto;
+        }
+
+        svg {
+            fill: var(--gold);
+            width: 7rem;
+        }
+
+        :host > div > div {
+            display: grid;
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto;
+        }
+
+        h4 {
+            padding-bottom: 0.4rem;
+        }
+    </style>
+
+    <div>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+            <path d="M508.5-291.5Q520-303 520-320t-11.5-28.5Q497-360 480-360t-28.5 11.5Q440-337 440-320t11.5 28.5Q463-280 480-280t28.5-11.5ZM440-440h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/>
+        </svg>
+        <div>
+            <h4>An error occurred!</h4>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script src="/src/components/error.ts" type="module"></script>
diff --git a/frontend/src/components/error.ts b/frontend/src/components/error.ts
new file mode 100644
index 0000000..b6977fd
--- /dev/null
+++ b/frontend/src/components/error.ts
@@ -0,0 +1,15 @@
+import {TesoftComponent} from "../scripts/main.ts";
+
+export class TesoftError extends TesoftComponent {
+    constructor() {
+        super();
+
+        const template = document.getElementById("tesoft-error-template") as HTMLTemplateElement;
+        const templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({mode: "open"});
+        shadowRoot.appendChild(templateContent.cloneNode(true));
+    }
+}
+
+customElements.define("tesoft-error", TesoftError);