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>

src/lib/database.d.ts

@@ -70,8 +70,11 @@ export type Database = {
           description: string | null
           id: string
           location: string | null
+          power: string
           tags: string[]
           updated_at: string | null
+          volume: string
+          wifi: string
         }
         Insert: {
           building_location?: string | null
@@ -79,8 +82,11 @@ export type Database = {
           description?: string | null
           id?: string
           location?: string | null
+          power: string
           tags?: string[]
           updated_at?: string | null
+          volume: string
+          wifi: string
         }
         Update: {
           building_location?: string | null
@@ -88,8 +94,11 @@ export type Database = {
           description?: string | null
           id?: string
           location?: string | null
+          power?: string
           tags?: string[]
           updated_at?: string | null
+          volume?: string
+          wifi?: string
         }
         Relationships: []
       }

src/lib/index.ts

@@ -5,26 +5,22 @@ export type Table<T extends keyof Database["public"]["Tables"]> =
 export type Enum<T extends keyof Database["public"]["Enums"]> = Database["public"]["Enums"][T];
 
 export const availableStudySpaceTags = [
-    "Quiet",
-    "Loud",
-    "Silent",
     "Crowded",
     "Group study",
-    "Power outlets",
-    "No power outlets",
     "24/7",
     "Food allowed",
     "No food allowed",
     "Well lit",
     "Poorly lit",
-    "Good wifi",
-    "Bad wifi",
-    "No wifi",
     "Whiteboard",
     "Restricted access",
     "Hot",
     "Air conditioned",
     "Cold",
-    "Cringe",
-    "PCs"
+    "PCs",
+    "Cringe"
 ];
+
+export const volumeTags = ["Silent", "Quiet", "Some Noise", "Loud"];
+export const wifiTags = ["Good WiFi", "Moderate WiFi", "Bad WiFi", "No WiFi"];
+export const powerOutletTags = ["Many Outlets", "Some Outlets", "No Outlets"];