Update startup.sh, +page.server.ts, FeaturedAdventureCard.svelte, and Navbar.svelte

src/routes/featured/+page.server.ts

@@ -4,7 +4,7 @@ import type { Adventure } from '$lib/utils/types';
 
 
 export const load = (async () => {
-    const result = await db.select().from(featuredAdventures)
+    const result = await db.select().from(featuredAdventures).orderBy(featuredAdventures.id);
     return {
         result : result as Adventure[]
     };

src/routes/featured/+page.svelte

@@ -1,11 +1,25 @@
 <script lang="ts">
     export let data
     console.log(data.result);
-    import AdventureCard from '$lib/components/AdventureCard.svelte';
+    import FeaturedAdventureCard from '$lib/components/FeaturedAdventureCard.svelte';
+    import type { Adventure } from '$lib/utils/types.js';
+    import { addAdventure, getNextId } from '../../services/adventureService.js';
+
+    function add(event: CustomEvent<{name: string, location: string}>) {
+        console.log(event.detail);
+        let newAdventure:Adventure = {
+            id: getNextId(),
+            name: event.detail.name,
+            location: event.detail.location,
+            created: ""
+        }
+        addAdventure(newAdventure);
+
+    }
 </script>
 
 <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 data.result as adventure (adventure.id)}
-        <AdventureCard id={adventure.id} name={adventure.name} location={adventure.location} created={adventure.created} />
+        <FeaturedAdventureCard on:add={add} name={adventure.name} location={adventure.location} />
     {/each}
 </div>

src/routes/log/+page.svelte

@@ -94,6 +94,12 @@
 
 </script>
 
+<div class="flex justify-center items-center w-full mt-4 mb-4">
+    <article class="prose">
+        <h2 class="text-center">Add new Location</h2>
+    </article>
+</div>
+
 <div class="flex flex-row items-center justify-center gap-4">
     <form on:submit={createNewAdventure} class="flex gap-2">
         <input type="text" bind:value={newName} placeholder="Adventure Name" class="input input-bordered w-full max-w-xs" />
@@ -102,6 +108,13 @@
     </form>
 </div>
 
+<div class="flex justify-center items-center w-full mt-4 mb-4">
+    <article class="prose">
+        <h1 class="text-center">My Visited Adventure Locations</h1>
+    </article>
+</div>
+
+
 {#if isShowingToast}
     <SucessToast action={toastAction} />
 {/if}
@@ -124,7 +137,7 @@
 {/if}
 
 {#if adventures.length != 0}
-<div class="flex flex-row items-center justify-center mt-16 gap-4">
+<div class="flex flex-row items-center justify-center mt-16 gap-4 mb-4">
     <button class="btn btn-neutral" on:click={async () => { window.location.href = exportData(); }}>
         <img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
     </button>