src/lib/components/SpaceCard.svelte

@@ -1,22 +1,21 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    import type { Table } from "@supabase/supabase-js";
 
     interface Props {
+        space: Table<"study_spaces">;
         alt: string;
         imgSrc: string;
-        title?: Snippet;
-        description?: Snippet;
         href?: string;
     }
 
-    const { alt, imgSrc, title, description, href }: Props = $props();
+    const { space, alt, imgSrc, href }: Props = $props();
 </script>
 
 <a class="card" {href}>
     <img src={imgSrc} {alt} />
     <div class="description">
-        {@render title?.()}
-        {@render description?.()}
+        <h1>{space.location}</h1>
+        <p>{space.description}</p>
     </div>
 </a>
 

src/routes/+page.svelte

@@ -26,15 +26,8 @@
             alt="Photo of {studySpace.description}"
             href="/space/{studySpace.id}"
             imgSrc={imgUrl}
-        >
-            {#snippet title()}
-                <h1>{studySpace.location}</h1>
-            {/snippet}
-
-            {#snippet description()}
-                <p>{studySpace.description}</p>
-            {/snippet}
-        </SpaceCard>
+            space={studySpace}
+        />
     {/each}
 </main>