feat: Adds reset button to result container view.

Package.swift

@@ -64,6 +64,8 @@ let package = Package(
       dependencies: [
         .product(name: "CasePaths", package: "swift-case-paths"),
         .product(name: "Dependencies", package: "swift-dependencies"),
+        .product(name: "Elementary", package: "elementary"),
+        .product(name: "ElementaryHTMX", package: "elementary-htmx"),
         .product(name: "PsychrometricClient", package: "swift-psychrometrics"),
         .product(name: "URLRouting", package: "swift-url-routing")
       ],
@@ -72,7 +74,7 @@ let package = Package(
     .target(
       name: "Styleguide",
       dependencies: [
-        .product(name: "Elementary", package: "elementary")
+        "Routes"
       ],
       swiftSettings: swiftSettings
     ),

Sources/Routes/HTMXExtensions.swift

@@ -1,8 +1,7 @@
 import Elementary
 import ElementaryHTMX
-import Routes
 
-extension HTMLAttribute.hx {
+public extension HTMLAttribute.hx {
   @Sendable
   static func get(route: SiteRoute.View) -> HTMLAttribute {
     get(SiteRoute.View.router.path(for: route))

Sources/Styleguide/Buttons.swift

@@ -19,3 +19,23 @@ public struct SubmitButton: HTML, Sendable {
     ) { label }
   }
 }
+
+public struct ResetButton: HTML, Sendable {
+
+  let label: String
+
+  public init(label: String = "Reset") {
+    self.label = label
+  }
+
+  public var content: some HTML<HTMLTag.button> {
+    button(.class("""
+      font-bold px-4 py-2 rounded-md transition-colors
+      bg-blue-500 dark:bg-yellow-300
+      hover:bg-blue-600 hover:dark:bg-yellow-400
+      text-yellow-300 dark:text-blue-500
+    """)) {
+      label
+    }
+  }
+}

Sources/Styleguide/ResultContainer.swift

@@ -1,12 +1,17 @@
 import Elementary
+import ElementaryHTMX
+import Routes
 
-public struct ResultContainer<Body: HTML>: HTML {
+public struct ResultContainer<Body: HTML, Header: HTML>: HTML {
   let body: Body
+  let header: Header
 
   public init(
-    @HTMLBuilder body: () -> Body
+    @HTMLBuilder body: () -> Body,
+    @HTMLBuilder header: () -> Header
   ) {
     self.body = body()
+    self.header = header()
   }
 
   public var content: some HTML {
@@ -15,10 +20,25 @@ public struct ResultContainer<Body: HTML>: HTML {
       bg-blue-50 dark:bg-slate-600
       text-blue-500 dark:text-slate-200
     """)) {
-      h3(.class("text-xl font-semibold mb-4")) { "Results" }
+      div(.class("relative")) {
+        h3(.class("text-xl font-semibold mb-4")) { "Results" }
+        header
+      }
       body
     }
   }
 }
 
-extension ResultContainer: Sendable where Body: Sendable {}
+public extension ResultContainer where Header == _AttributedElement<ResetButton> {
+  init(
+    reset resetRoute: SiteRoute.View,
+    @HTMLBuilder body: () -> Body
+  ) {
+    self.init(body: body) {
+      ResetButton()
+        .attributes(.class("absolute bottom-0 right-0"), .hx.get(route: resetRoute), .hx.target("#content"))
+    }
+  }
+}
+
+extension ResultContainer: Sendable where Body: Sendable, Header: Sendable {}

Sources/ViewController/Views/MoldRisk.swift

@@ -42,7 +42,7 @@ struct MoldRiskResponse: HTML {
   let response: MoldRisk.Response
 
   var content: some HTML {
-    ResultContainer {
+    ResultContainer(reset: .moldRisk(.index)) {
       div(
         .class("""
         p-2 rounded-lg shadow-lg \(response.riskLevel.backgroundColor) border-2 border \(response.riskLevel.borderColor)