add tag component

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>

frontend/src/components/tag.njk

@@ -0,0 +1,27 @@
+<template id="tesoft-tag-template">
+    <style>
+        @import "/src/styles/default.css";
+
+        :host {
+            display: block;
+        }
+
+        :host > div {
+            display: grid;
+            grid-template-columns: auto auto;
+            grid-template-rows: auto;
+        }
+    </style>
+
+    <a>
+        <tesoft-badge>
+            <svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem">
+                <path d="M856-390 570-104q-12 12-27 18t-30 6q-15 0-30-6t-27-18L103-457q-11-11-17-25.5T80-513v-287q0-33 23.5-56.5T160-880h287q16 0 31 6.5t26 17.5l352 353q12 12 17.5 27t5.5 30q0 15-5.5 29.5T856-390ZM513-160l286-286-353-354H160v286l353 354ZM260-640q25 0 42.5-17.5T320-700q0-25-17.5-42.5T260-760q-25 0-42.5 17.5T200-700q0 25 17.5 42.5T260-640Zm220 160Z"/>
+            </svg>
+            <slot></slot>
+        </tesoft-badge>
+    </a>
+</template>
+
+<script src="/src/components/tag.ts" type="module"></script>
+{% includeOnce 'components/badge.njk' %}

frontend/src/components/tag.ts

@@ -0,0 +1,36 @@
+import {TesoftComponent} from "../scripts/main.ts";
+
+export class TesoftTag extends TesoftComponent {
+    static observedAttributes = ["href"];
+
+    private readonly anchor: HTMLAnchorElement;
+
+    constructor() {
+        super();
+
+        const template = document.getElementById("tesoft-tag-template") as HTMLTemplateElement;
+        const templateContent = template.content;
+
+        const shadowRoot = this.attachShadow({mode: "open"});
+        shadowRoot.appendChild(templateContent.cloneNode(true));
+
+        this.anchor = shadowRoot.querySelector<HTMLAnchorElement>("a")!;
+    }
+
+    // noinspection JSUnusedGlobalSymbols
+    attributeChangedCallback(name: string, _oldValue: string | null, newValue: string | null) {
+        if (name === "href") {
+            this.anchor.href = newValue ?? "";
+        }
+    }
+
+    set href(value: string | null) {
+        if (value) {
+            this.setAttribute("href", value);
+        } else {
+            this.removeAttribute("href");
+        }
+    }
+}
+
+customElements.define("tesoft-tag", TesoftTag);