feat: Adds styleguide, working on result view container.

Sources/ViewController/Views/MoldRisk.swift

@@ -1,56 +1,91 @@
 import Elementary
+import PsychrometricClient
 import Routes
+import Styleguide
 
 struct MoldRiskForm: HTML {
 
   var content: some HTML {
-    div(.class("grid grid-cols-1 lg:grid-cols-12")) {
-      div(.class("col-span-1")) {}
-      div(.class("col-span-10 rounded-xl shadow-lg bg-slate-300 dark:bg-slate-700 p-8")) {
-        div(.class("flex items-center gap-3 mb-6")) {
-          SVG.thermometer
-          h2(.class("text-2xl font-extrabold dark:text-white")) { "Mold Risk Calculator" }
+    FormHeader(label: "Mold Risk Calculator", svg: .thermometer)
+    form {
+      div(.class("space-y-6")) {
+        LabeledContent(label: "Indoor Temperature (°F)") {
+          Input(id: "temperature", placeholder: "Dry bulb temperature")
+            .attributes(.type(.number), .step("0.1"), .min("0.1"), .autofocus)
         }
-        form {
-          div(.class("space-y-6")) {
-            div {
-              label(.for("temperature"), .class("block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2")) {
-                "Indoor Temperature"
-              }
-              input(
-                .type(.number), .id("temperature"), .placeholder("Dry bulb temperature"), .required,
-                .step("0.1"), .min("0.1"),
-                .class("""
-                  w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-yellow-800
-                  focus:border-yellow-800 text-gray-700 dark:text-white
-                """)
-              )
-            }
-            div {
-              label(.for("humidity"), .class("block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2")) {
-                "Indoor Humidity (%)"
-              }
-              input(
-                .type(.number), .id("humidity"), .name("humidity"), .placeholder("Relative humidity"), .required,
-                .step("0.1"), .min("0.1"),
-                .class("""
-                  w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-yellow-800
-                  focus:border-yellow-800 text-gray-700 dark:text-white
-                """)
-              )
-            }
-            div {
-              button(.type(.submit), .class("""
-              w-full bg-\(Colors.blue) text-\(Colors.yellow) font-bold py-3 rounded-md hover:bg-blue-600
-              transition-colors
-              """)) {
-                "Calculate Mold Risk"
-              }
-            }
-          }
+
+        LabeledContent(label: "Indor Humdity (%)") {
+          Input(id: "humidity", placeholder: "Relative humidity")
+            .attributes(.type(.number), .step("0.1"), .min("0.1"))
+        }
+
+        div {
+          SubmitButton(label: "Calculate Mold Risk")
+        }
+
+        div(.id("result")) {
+          MoldRiskResponse(response: .mock)
         }
-        div(.class("col-span-1")) {}
       }
     }
   }
 }
+
+struct MoldRiskResponse: HTML {
+  let response: MoldRisk.Response
+
+  var content: some HTML {
+    ResultContainer {
+      // TODO: Color needs to be derived from risk level.
+      div(.class("p-2 rounded-lg shadow-lg bg-lime-100 border-2 border border-lime-600")) {
+        LabeledContent {
+          p(.class("text-lg font-semibold \(text: .green) dark:text-lime-600 mt-2")) {
+            "Risk Level: \(response.riskLevel.rawValue.capitalized)"
+          }
+        } label: {
+          SVG(.exclamation, color: "\(text: .green) dark:text-lime-600")
+        }
+        .attributes(.class("flex items-center gap-2"))
+      }
+
+      PsychrometricPropertiesGrid(properties: response.psychrometricProperties)
+        .attributes(.class("mx-6"))
+
+      div(.class("mt-8 p-4 bg-gray-700 rounded-md shadow-md border border-blue-500")) {
+        p(.class("text-sm \(text: .blue)")) {
+          span(.class("font-extrabold pe-2")) { "Note:" }
+          """
+           These calculations are based on typical indoor conditions and common mold species. Actual mold growth can
+           vary based on surface materials, air movement, and other environmental factors. Always address moisture
+           issues promptly and consult professionals for severe cases.
+          """
+        }
+      }
+    }
+  }
+}
+
+struct PsychrometricPropertiesGrid: HTML {
+  let properties: PsychrometricProperties
+
+  var content: some HTML<HTMLTag.div> {
+    div(.class("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-6 md:mx-20")) {
+      displayProperty("Dew Point", "\(properties.dewPoint.value) \(properties.dewPoint.units.symbol)")
+      displayProperty("Wet Bulb", "\(properties.wetBulb.value) \(properties.wetBulb.units.symbol)")
+      displayProperty("Enthalpy", "\(properties.enthalpy.value) \(properties.wetBulb.units.symbol)")
+      displayProperty("Density", "\(properties.density.value) \(properties.density.units.rawValue)")
+      displayProperty("Vapor Pressure", "\(properties.vaporPressure.value) \(properties.vaporPressure.units.symbol)")
+      displayProperty("Specific Volume", "\(properties.specificVolume.rawValue)")
+      displayProperty("Absolute Humidity", "\(properties.absoluteHumidity.value) \(properties.absoluteHumidity.units.symbol)")
+      displayProperty("Humidity Ratio", "\(properties.humidityRatio.value)")
+      displayProperty("Degree of Saturation", "\(properties.degreeOfSaturation.value)")
+    }
+  }
+
+  func displayProperty(_ label: String, _ value: String) -> some HTML {
+    p(.class("\(text: .darkGray) dark:\(text: .white)")) {
+      span(.class("font-semibold")) { "\(label): " }
+      span(.class("font-light")) { value }
+    }
+  }
+}