Refactor AdventureCard component and shared page

src/lib/components/AdventureCard.svelte

@@ -75,3 +75,31 @@
     </div>
   </div>
 {/if}
+
+{#if type === "shared"}
+  <div
+    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
+  >
+    <div class="card-body">
+      <h2 class="card-title overflow-ellipsis">{name}</h2>
+      {#if location !== ""}
+        <p>
+          <img
+            src={locationDot}
+            class="inline-block -mt-1 mr-1"
+            alt="Logo"
+          />{location}
+        </p>
+      {/if}
+      {#if created !== ""}
+        <p>
+          <img
+            src={calendar}
+            class="inline-block -mt-1 mr-1"
+            alt="Logo"
+          />{created}
+        </p>
+      {/if}
+    </div>
+  </div>
+{/if}

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>

tailwind.config.js

@@ -6,6 +6,6 @@ export default {
   },
   plugins: [require("@tailwindcss/typography"), require("daisyui")],
   daisyui: {
-    themes: ["sunset"],
+    themes: ["night"],
   },
 };