Refactor adventure page layout to display activity types in +page.svelte and update server files

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

@@ -11,6 +11,7 @@
   onMount(() => {
     if (data.adventure.adventure) {
       adventure = data.adventure.adventure[0];
+      console.log(adventure.activityTypes);
     } else {
       goto("/404");
     }
@@ -63,4 +64,12 @@
       />
     </div>
   {/if}
+  {#if adventure.activityTypes && adventure.activityTypes.length > 0}
+    <div class="flex justify-center items-center mt-4">
+      <p class="text-center text-lg">Activities:</p>
+      <ul class="flex flex-wrap">
+        {adventure.activityTypes.toString()}
+      </ul>
+    </div>
+  {/if}
 {/if}

src/routes/api/adventure/+server.ts

@@ -1,5 +1,6 @@
 import { db } from "$lib/db/db.server";
 import { adventureTable } from "$lib/db/schema";
+import type { Adventure } from "$lib/utils/types";
 import { json, type RequestEvent, type RequestHandler } from "@sveltejs/kit";
 import { and, eq } from "drizzle-orm";
 
@@ -38,6 +39,20 @@ export const GET: RequestHandler = async ({ url, locals }) => {
     return json({ error: "Adventure not found" }, { status: 404 });
   }
 
+  let adventureData = JSON.stringify(
+    adventure.map((r) => {
+      const adventure: Adventure = r as Adventure;
+      if (typeof adventure.activityTypes === "string") {
+        try {
+          adventure.activityTypes = JSON.parse(adventure.activityTypes);
+        } catch (error) {
+          console.error("Error parsing activityTypes:", error);
+          adventure.activityTypes = undefined;
+        }
+      }
+    })
+  );
+
   //   console.log("GET /api/adventure?id=", id);
   //   console.log("User:", user);