From 6f798bc479e99cc96ae261673ac6698e837c3679 Mon Sep 17 00:00:00 2001
From: Gleb Koval <gleb@koval.net>
Date: Fri, 6 Jun 2025 03:03:54 +0100
Subject: [PATCH] feat: display tags instead of description on main page

---
 src/lib/components/SpaceCard.svelte | 30 +++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/SpaceCard.svelte b/src/lib/components/SpaceCard.svelte
index 076eded..0b1626b 100644
--- a/src/lib/components/SpaceCard.svelte
+++ b/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>