src/lib/components/SpaceCard.svelte

@@ -15,7 +15,11 @@
     <img src={imgSrc} {alt} />
     <div class="description">
         <h1>{space.location}</h1>
-        <p>{space.description}</p>
+        <div class="tagContainer">
+            {#each space.tags as tag (tag)}
+                <span class="tag">{tag}</span>
+            {/each}
+        </div>
     </div>
 </a>
 
@@ -33,7 +37,6 @@
     .description {
         padding: 0.5rem;
         color: #edebe9;
-        font-size: 0.875rem;
     }
     img {
         width: 100%;
@@ -41,4 +44,27 @@
         aspect-ratio: 1 / 1;
         object-fit: cover;
     }
+
+    h1 {
+        margin-bottom: 0.5rem;
+    }
+
+    .tagContainer {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.4rem;
+        border-radius: 0.5rem;
+        background: none;
+    }
+
+    .tag {
+        display: flex;
+        align-items: center;
+        border-radius: 0.25rem;
+        background-color: #2e4653;
+        color: #eaffeb;
+        font-size: 0.875rem;
+        cursor: pointer;
+        padding: 0.2rem 0.6rem;
+    }
 </style>