src/lib/components/CompulsoryTags.svelte

@@ -1,26 +1,20 @@
 <script lang="ts">
     const { space } = $props();
+
+    const tagToColor: Record<string, string> = {
+        "Many Outlets": "compulsoryTagGreen",
+        "No Outlets": "compulsoryTagRed",
+        "Some Outlets": "compulsoryTagYellow",
+        "Good WiFi": "compulsoryTagGreen",
+        "Bad WiFi": "compulsoryTagRed",
+        "Moderate WiFi": "compulsoryTagYellow",
+        "No WiFi": "compulsoryTagRed"
+    };
 </script>
 
 <span class="compulsoryTagGreen">{space.volume}</span>
-<span
+<span class={tagToColor[space.power]}>{space.power}</span>
-    class={space.power === "Many Outlets"
+<span class={tagToColor[space.wifi]}>{space.wifi}</span>
-        ? "compulsoryTagGreen"
-        : space.power === "No Outlets"
-          ? "compulsoryTagRed"
-          : space.power === "Some Outlets"
-            ? "compulsoryTagYellow"
-            : "compulsoryTagGreen"}>{space.power}</span
->
-<span
-    class={space.wifi === "Good WiFi"
-        ? "compulsoryTagGreen"
-        : space.wifi === "Bad WiFi" || space.wifi === "No WiFi"
-          ? "compulsoryTagRed"
-          : space.wifi === "Moderate WiFi"
-            ? "compulsoryTagYellow"
-            : "compulsoryTagGreen"}>{space.wifi}</span
->
 
 <style>
     .compulsoryTagGreen {