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 >