feat: added compulsory tags

src/lib/components/CompulsoryTags.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    const { space } = $props();
+</script>
+
+<span class="compulsoryTagGreen">{space.volume}</span>
+<span
+    class={space.power === "Many Outlets"
+        ? "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 {
+        display: flex;
+        font-weight: bold;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        border-radius: 0.25rem;
+        background-color: #eaffeb;
+        color: #2e4653;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+    }
+    .compulsoryTagYellow {
+        display: flex;
+        font-weight: bold;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        border-radius: 0.25rem;
+        background-color: #ffffd4;
+        color: #534b2e;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+    }
+    .compulsoryTagRed {
+        display: flex;
+        font-weight: bold;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        border-radius: 0.25rem;
+        background-color: #ffcece;
+        color: #532e2e;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+    }
+</style>

src/lib/components/SpaceCard.svelte

@@ -9,17 +9,21 @@
     }
 
     const { space, alt, imgSrc, href }: Props = $props();
+    import CompulsoryTags from "./CompulsoryTags.svelte";
 </script>
 
 <a class="card" {href}>
     <img src={imgSrc} {alt} />
     <div class="description">
         <h1>{space.location}</h1>
-        <div class="tagContainer">
-            {#each space.tags as tag (tag)}
-                <span class="tag">{tag}</span>
-            {/each}
-        </div>
+        <div class="compulsoryContainer"><CompulsoryTags {space} /></div>
+        {#if space.tags.length > 0}
+            <div class="tagContainer">
+                {#each space.tags as tag (tag)}
+                    <span class="tag">{tag}</span>
+                {/each}
+            </div>
+        {/if}
     </div>
 </a>
 
@@ -55,11 +59,14 @@
         gap: 0.4rem;
         border-radius: 0.5rem;
         background: none;
+        padding-top: 0.5rem;
     }
 
     .tag {
         display: flex;
         align-items: center;
+        justify-content: center;
+        text-align: center;
         border-radius: 0.25rem;
         background-color: #2e4653;
         color: #eaffeb;
@@ -67,4 +74,11 @@
         cursor: pointer;
         padding: 0.2rem 0.6rem;
     }
+
+    .compulsoryContainer {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 0.5rem;
+        font-size: 0.875rem;
+    }
 </style>