feat: Adds WarningBox to Styleguide

2025-02-28 17:18:09 -05:00
parent 49af734a97
commit 3be0f7a828
7 changed files with 74 additions and 53 deletions
--- a/Sources/ViewController/MainPage.swift
+++ b/Sources/ViewController/MainPage.swift
@@ -0,0 +1,116 @@
+import Elementary
+import ElementaryHTMX
+import Routes
+import Styleguide
+
+struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
+  let title = "HVAC-Toolbox"
+  let lang = "en-US"
+  let inner: @Sendable () -> Inner
+
+  var head: some HTML {
+    meta(.charset(.utf8))
+    meta(.name("viewport"), .content("width=device-width, initial-scale=1.0"))
+    link(.rel(.stylesheet), .href("/output.css"))
+    link(
+      .rel(.icon),
+      .href("/favicon-32x32.png"),
+      .init(name: "type", value: "image/png"),
+      .init(name: "sizes", value: "32x32")
+    )
+    link(
+      .rel(.icon),
+      .href("/favicon-16x16.png"),
+      .init(name: "type", value: "image/png"),
+      .init(name: "sizes", value: "16x16")
+    )
+    link(
+      .rel(.init(rawValue: "apple-touch-icon")),
+      .href("/apple-touch-icon.png"),
+      .init(name: "sizes", value: "180x180")
+    )
+    link(.rel(.init(rawValue: "mainifest")), .href("/site.webmanifest"))
+    script(.src("https://unpkg.com/htmx.org@2.0.4")) {}
+  }
+
+  var body: some HTML {
+    main(.class("bg-slate-100 dark:bg-gray-800")) {
+      div(.class("min-h-screen")) {
+        Header()
+        PageContent(body: inner)
+      }
+    }
+  }
+}
+
+private struct Header: HTML {
+
+  var content: some HTML {
+    header(.class("\(bg: .blue) mb-8 flex flex-row gap-2 border \(border: .yellow)")) {
+      a(
+        .href(route: .index),
+        .class("group flex flex-row gap-2 \(bg: .yellow) pe-2 rounded-e-lg \(text: .blue) hover:text-blue-600")
+      ) {
+        img(.src("/images/toolbox.svg"), .width(40), .height(40), .class("py-1"))
+        div(.class("flex flex-row mt-2")) {
+          h2(.class("text-2xl font-extrabold pe-3")) { "HVAC-Toolbox" }
+          SVG(.wind, color: .blue)
+            .attributes(.class("group-hover:text-blue-600"))
+        }
+      }
+      nav(.class("flex flex-row gap-2 p-2 mt-2")) {
+        // TODO: Add class active, to button that is the active route.
+        ul(.class("flex flex-wrap gap-x-2 lg:gap-x-5 \(text: .yellow) font-bold")) {
+          li {
+            a(
+              .class("hover:border-b \(border: .yellow)"),
+              .hx.get(route: .moldRisk(.index)), .hx.target("#content"), .hx.pushURL(true)
+            ) {
+              "Mold-Risk"
+            }
+          }
+          li {
+            a(
+              .class("[&:hover]:border-b \(border: .yellow)"),
+              .hx.get(route: .dehumidifierSize(.index)), .hx.target("#content"), .hx.pushURL(true)
+            ) {
+              "Dehumidifier-Sizing"
+            }
+          }
+          li {
+            a(
+              .class("hover:border-b \(border: .yellow)"),
+              .hx.get(route: .hvacSystemPerformance(.index)), .hx.target("#content"), .hx.pushURL(true)
+            ) {
+              "HVAC-System-Performance"
+            }
+          }
+          li {
+            a(
+              .class("hover:border-b \(border: .yellow)"),
+              .hx.get(route: .roomPressure(.index)), .hx.target("#content"), .hx.pushURL(true)
+            ) {
+              "Room-Pressure"
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+private struct PageContent<Body: HTML>: HTML where Body: Sendable {
+  let body: () -> Body
+
+  var content: some HTML {
+    div(.class("mx-5 lg:mx-20")) {
+      div(.class("rounded-xl shadow-lg bg-white dark:bg-slate-700 p-8 text-gray-600 dark:text-slate-200")) {
+        div(.id("content")) {
+          body()
+        }
+      }
+    }
+  }
+}
+
+protocol SendableHTMLDocument: HTMLDocument, Sendable {}