feat: reports

src/routes/space/[id]/+page.svelte

@@ -4,6 +4,7 @@
     import placeholder from "$lib/assets/study_space.png";
     import Carousel from "$lib/components/Carousel.svelte";
     import CompulsoryTags from "$lib/components/CompulsoryTags.svelte";
+    import Report from "$lib/components/Report.svelte";
 
     const { data } = $props();
     const { space, supabase } = $derived(data);
@@ -17,6 +18,11 @@
                           .publicUrl
               )
     );
+
+    let isReportVisible = $state(false);
+    function hideFunc() {
+        isReportVisible = false;
+    }
 </script>
 
 <Navbar>
@@ -25,6 +31,8 @@
     </a>
 </Navbar>
 
+{#if isReportVisible}<Report {data} studySpaceId={space.id} {hideFunc} />
+{/if}
 <main>
     <Carousel urls={imgUrls} />
     <div class="nameContainer">
@@ -51,6 +59,14 @@
     <p class="addrContainer">
         {space.building_location}
     </p>
+
+    <button
+        type="button"
+        class="reportButton"
+        onclick={() => {
+            isReportVisible = true;
+        }}>Report</button
+    >
 </main>
 
 <style>
@@ -141,4 +157,15 @@
         font-size: 1.3rem;
         padding-bottom: 0;
     }
+    .reportButton {
+        width: 100%;
+        padding: 0.4rem;
+        border-radius: 0.5rem;
+        border: none;
+        background-color: #bd4949;
+        color: #ffffff;
+        font-size: 1rem;
+        cursor: pointer;
+        margin-top: 1rem;
+    }
 </style>