initial commit

2025-05-22 17:46:02 +02:00
parent a6d168c504
commit 6fb1e51c79
25 changed files with 1599 additions and 10 deletions
@@ -0,0 +1,97 @@
+---
+import Section from "../Section.astro";
+
+enum NavigationItemType {
+  Link = 0,
+  Text = 1,
+}
+
+type NavigationItem =
+  | {
+      path: string;
+      label: string;
+      type: NavigationItemType.Link;
+    }
+  | {
+      type: NavigationItemType.Text;
+      content: string;
+    };
+
+type NavigationGroup = {
+  title: string;
+  class?: string;
+  items: Array<NavigationItem>;
+};
+
+const tree: Array<NavigationGroup> = [
+  {
+    title: "Übersicht",
+    items: [
+      {
+        path: "/",
+        type: NavigationItemType.Link,
+        label: "Startseite",
+      },
+    ],
+  },
+  {
+    title: "Rechtliches",
+    items: [
+      {
+        path: "/legal/imprint",
+        label: "Impressum",
+        type: NavigationItemType.Link,
+      },
+      {
+        path: "/legal/privacy",
+        label: "Datenschutzerklärung",
+        type: NavigationItemType.Link,
+      },
+    ],
+  },
+  {
+    title: "Zugehöriges",
+    items: [
+      {
+        path: "https://enrico.buehler.earth",
+        label: "Enrico Bühler",
+        type: NavigationItemType.Link,
+      },
+    ],
+  },
+  {
+    title: "",
+    class: "ml-auto mr-0 self-end",
+    items: [
+      {
+        type: NavigationItemType.Text,
+        content: "Made with ❤️ in Rottweil",
+      },
+    ],
+  },
+];
+---
+
+<footer class="bg-neutral-accent">
+  <Section>
+    <div class="flex flex-row flex-wrap gap-12 w-full pb-8">
+      {
+        tree.map((group) => (
+          <div class={group.class}>
+            {group.title && <h3 class="mb-2">{group.title}</h3>}
+            <div class="flex flex-col">
+              {group.items.map((item) => {
+                switch (item.type) {
+                  case NavigationItemType.Link:
+                    return <a href={item.path}>{item.label}</a>;
+                  case NavigationItemType.Text:
+                    return <p>{item.content}</p>;
+                }
+              })}
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </Section>
+</footer>