feat: Adds WarningBox to Styleguide

Sources/ViewController/Views/DehumidifierSize.swift

@@ -98,21 +98,7 @@ struct DehumidifierSizeResult: HTML {
       }
 
       // Display warnings, if applicable
-      if response.warnings.count > 0 {
-        div(.class("""
-          w-full mt-6 p-4 rounded-lg shadow-lg
-          text-amber-500
-          bg-amber-100 dark:bg-amber-200
-          border border-amber-500
-        """)) {
-          span(.class("font-semibold mb-4 border-b")) { "Warning\(response.warnings.count > 1 ? "s:" : ":")" }
-          ul(.class("list-disc mx-10")) {
-            for warning in response.warnings {
-              li { warning }
-            }
-          }
-        }
-      }
+      WarningBox(warnings: response.warnings)
 
       Note {
         """
@@ -124,27 +110,3 @@ struct DehumidifierSizeResult: HTML {
     }
   }
 }
-
-// <div className = "p-4 bg-white rounded-lg shadow-sm">
-// <p className = Recommended < "text-sm text-gray-600 mb-2" Size: </p>
-// <a
-// href = { result.recommendedSize.url }
-// target = "_blank"
-// rel = "noopener noreferrer"
-// className = "block p-4 bg-blue-100 rounded-lg hover:bg-blue-200 transition-colors group"
-// >
-// <div className = "flex items-center justify-between">
-// <div>
-//   <span className = "text-2xl font-bold text-blue-700">
-//   { result.recommendedSize.size } PPD
-//   </span>
-//   <p className = "text-sm text-blue-600 mt-1">
-//   Click to view available models →
-//   </p>
-//   </div>
-//   <div className = "w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center group-hover:bg-blue-300 transition-colors">
-//   <Droplets className = "w-6 h-6 text-blue-700" />
-//   </div>
-//   </div>
-//   </a>
-//   </div >

Sources/ViewController/Views/HVACSystemPerformance.swift

@@ -98,9 +98,6 @@ struct HVACSystemPerformanceResult: HTML, Sendable {
         PsychrometricPropertiesGrid(title: "Supply Air Properties", properties: response.supplyAirProperties)
       }
     }
-    // header: {
-    //   p { "Fix me." }
-    // }
   }
 
   private struct CapacityContainer: HTML, Sendable {
@@ -134,7 +131,6 @@ struct HVACSystemPerformanceResult: HTML, Sendable {
         text-lg font-semibold flex justify-center py-2 mb-4 text-blue-600 dark:text-slate-300
         """)) { "System Performance Metrics" }
 
-        // grid grid-cols-1 md:grid-cols-2 gap-6
         div(.class("flex justify-between items-center p-4")) {
           div(.class("space-y-3")) {
             LabeledMetric(label: "Airflow per Ton", value: metrics.cfmPerTon, units: "CFM/ton")
@@ -155,12 +151,8 @@ struct HVACSystemPerformanceResult: HTML, Sendable {
         }
 
         if shr < 0.7 {
-          div(.class("mx-8 mb-4 mt-8 p-4 rounded-xl shadow-lg border border-amber-500 bg-amber-200 text-amber-500")) {
-            h4(.class("text-lg font-semibold")) { "Warning:" }
-            p(.class("text-sm")) {
-              "Low sensible heat ratio may indicate excessive dehumidification or low airflow."
-            }
-          }
+          WarningBox("Low sensible heat ratio may indicate excessive dehumidification or low airflow.")
+            .attributes(.class("mb-4 mx-8"))
         }
       }
     }

Sources/ViewController/Views/RoomPressure.swift

@@ -75,7 +75,9 @@ struct RoomPressureForm: HTML, Sendable {
             switch mode {
             case .knownAirflow:
               Input(id: pressureID, placeholder: pressurePlaceholder)
-                .attributes(.type(.number), .step("0.1"), .min("0.1"), .max("3.0"), .autofocus, .required)
+                .attributes(
+                  .type(.number), .step("0.1"), .min("0.1"), .max("3.0"), .autofocus, .required
+                )
             case .measuredPressure:
               Input(id: pressureID, placeholder: pressurePlaceholder)
                 .attributes(.type(.number), .step("0.1"), .min("0.1"), .autofocus, .required)
@@ -117,7 +119,7 @@ struct RoomPressureForm: HTML, Sendable {
     private var pressurePlaceholder: String {
       switch mode {
       case .knownAirflow: return "Room pressure (max 3 pa.)"
-      case .measuredPressure: return "Measure pressure"
+      case .measuredPressure: return "Measured pressure"
       }
     }
   }