Refactor AdventureCard component and shared page

src/routes/shared/[key]/+page.server.ts

@@ -5,14 +5,33 @@ import type { Adventure } from "$lib/utils/types";
 
 export async function load({ params }) {
   let key = params.key;
+
+  // Fetch data from the database
   let result = await db
     .select()
     .from(sharedAdventures)
     .where(eq(sharedAdventures.id, key))
     .execute();
-  let adventure = result[0].data as Adventure;
-  console.log(adventure);
+
+  // Assuming result is an array with a single object
+  let rawData = result[0];
+
+  // Parse the data field, which contains a JSON string
+  let adventures = JSON.parse(rawData.data as string);
+
+  // Map the parsed adventures to the Adventure interface
+  let adventureArray = adventures.map((item: any) => {
+    return {
+      id: item.id,
+      name: item.name,
+      location: item.location,
+      created: item.created,
+    } as Adventure;
+  });
+
+
+  // Return the array of Adventure objects
   return {
-    result: adventure,
+    adventureArray,
   };
 }

src/routes/shared/[key]/+page.svelte

@@ -1,7 +1,30 @@
 <script lang="ts">
   import type { Adventure } from "$lib/utils/types";
   export let data;
-  let result = data.result;
+  let array = data.adventureArray as Adventure[];
+  import AdventureCard from "$lib/components/AdventureCard.svelte";
 </script>
 
-<p>{result}</p>
+<!-- loop through each adventure -->
+<!-- {#each array as adventure}
+  <div>
+    <h1>{adventure.name}</h1>
+    <p>{adventure.location}</p>
+    <p>{adventure.created}</p>
+    <p>{adventure.id}</p>
+  </div>
+{/each} -->
+<h1 class="text-center font-bold text-4xl">Shared Adventure List</h1>
+<div
+  class="grid xl:grid-cols-3 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1 gap-4 mt-4 content-center auto-cols-auto ml-6 mr-6"
+>
+  {#each array as adventure (adventure.id)}
+    <AdventureCard
+      type="shared"
+      id={adventure.id}
+      name={adventure.name}
+      location={adventure.location}
+      created={adventure.created}
+    />
+  {/each}
+</div>