src/lib/components/inputs/TagFilter.svelte

@@ -8,8 +8,6 @@
     export let dropdownVisible: boolean;
     export let deleteTag;
     export let addTag;
-    
-  
 </script>
 
 <form>
@@ -59,7 +57,6 @@
             </div>
         {/if}
     </div>
-  
 </form>
 
 <style>
@@ -72,11 +69,6 @@
         margin: 0 auto;
     }
 
-    label {
-        color: #ffffff;
-        margin-top: 0.5rem;
-    }
-    
     .tagDisplay {
         display: flex;
         gap: 0.4rem;
@@ -155,40 +147,4 @@
     .avaliableTag:last-child {
         padding-bottom: 0.6rem;
     }
-
-    .compulsoryTags {
-        display: grid;
-        gap: 0.4rem;
-        border-radius: 0.5rem;
-        background-color: none;
-        width: 100%;
-        font-size: 1rem;
-        grid-template-columns: repeat(3, 1fr);
-    }
-
-    .compulsoryContainer {
-        display: flex;
-        flex-direction: column;
-        align-items: left;
-        justify-content: top;
-        border-radius: 0.5rem;
-        background-color: none;
-    }
-
-    .compulsoryTagSelect {
-        width: 100%;
-        height: 100%;
-        padding: 0.5rem;
-        border-radius: 0.5rem;
-        border: 2px solid #eaffeb;
-        background: none;
-        color: #eaffeb;
-        font-size: 0.9rem;
-        text-align: left;
-    }
-
-    .compulsoryTagSelect option {
-        background-color: #2e4653;
-        color: #eaffeb;
-    }
 </style>

src/lib/index.ts

@@ -25,4 +25,4 @@ 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"];
 
-export const allTags = [...availableStudySpaceTags, ...volumeTags, ...wifiTags, ...powerOutletTags]
+export const allTags = [...availableStudySpaceTags, ...volumeTags, ...wifiTags, ...powerOutletTags];

src/routes/+page.svelte

@@ -4,25 +4,24 @@
     import crossUrl from "$lib/assets/cross.svg";
     import Navbar from "$lib/components/Navbar.svelte";
     import TagFilter from "$lib/components/inputs/TagFilter.svelte";
-    import {availableStudySpaceTags} from "$lib"
-    import {allTags} from "$lib"
+    import { allTags } from "$lib";
 
     const { data } = $props();
     const { studySpaces, supabase } = $derived(data);
 
-    let selectedTags = $state<string[]>([])
+    let selectedTags = $state<string[]>([]);
     let tagFilter = $state("");
-    let tagFilterElem = $state<HTMLInputElement>()
+    let tagFilterElem = $state<HTMLInputElement>();
     let filteredTags = $derived(
         allTags
             .filter((tag) => tag.toLowerCase().includes(tagFilter.toLowerCase()))
             .filter((tag) => allTags.includes(tag))
-        )
+    );
 
     let filteredStudySpaces = $derived(() =>
         selectedTags.length === 0
             ? studySpaces
-            : studySpaces.filter(space => {
+            : studySpaces.filter((space) => {
                   const allTags = [
                       ...(space.tags || []),
                       space.volume,
@@ -30,11 +29,11 @@
                       space.power
                   ].filter(Boolean);
 
-                return selectedTags.every(tag => allTags.includes(tag));
+                  return selectedTags.every((tag) => allTags.includes(tag));
               })
     );
 
-    let dropdownVisible = $state(false)
+    let dropdownVisible = $state(false);
 
     function deleteTag(tagName: string) {
         return () => {
@@ -60,13 +59,13 @@
 
 <main>
     <TagFilter
-        selectedTags={selectedTags}
-        tagFilter={tagFilter}
-        tagFilterElem={tagFilterElem}
-        filteredTags={filteredTags}
-        dropdownVisible={dropdownVisible}
-        deleteTag={deleteTag}
-        addTag={addTag}
+        {selectedTags}
+        {tagFilter}
+        {tagFilterElem}
+        {filteredTags}
+        {dropdownVisible}
+        {deleteTag}
+        {addTag}
     />
 
     {#each filteredStudySpaces() as studySpace (studySpace.id)}