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

src/routes/adventure/[id]/+page.server.ts

@@ -9,7 +9,7 @@ export const load = (async (event) => {
     return redirect(302, "/login");
   }
 
-  let adventureUserId = await db
+  let adventureUserId: any[] = await db
     .select({ userId: adventureTable.userId })
     .from(adventureTable)
     .where(eq(adventureTable.id, Number(event.params.id)))

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

@@ -66,9 +66,15 @@
   {/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>
+      <p class="text-center text-lg">Activities:&nbsp</p>
       <ul class="flex flex-wrap">
-        {adventure.activityTypes.toString()}
+        {#each adventure.activityTypes as activity}
+          <div
+            class="badge badge-primary mr-1 text-md font-semibold pb-2 pt-1 mb-1"
+          >
+            {activity}
+          </div>
+        {/each}
       </ul>
     </div>
   {/if}

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

@@ -39,7 +39,7 @@ export const GET: RequestHandler = async ({ url, locals }) => {
     return json({ error: "Adventure not found" }, { status: 404 });
   }
 
-  let adventureData = JSON.stringify(
+  JSON.stringify(
     adventure.map((r) => {
       const adventure: Adventure = r as Adventure;
       if (typeof adventure.activityTypes === "string") {