chore: Add buttons for generating description and searching image in CreateNewAdventure and EditModal components

src/lib/components/CreateNewAdventure.svelte

@@ -163,6 +163,7 @@
         <!-- if there is a button in form, it will close the modal -->
         <button class="btn mt-4" on:click={close}>Close</button>
       </form>
+      <div class="flex items-center justify-center flex-wrap gap-4 mt-4">
         <button class="btn btn-secondary" on:click={generate}
           >Generate Description</button
         >
@@ -171,4 +172,5 @@
         >
       </div>
     </div>
+  </div>
 </dialog>

src/lib/components/EditModal.svelte

@@ -4,7 +4,7 @@
   import type { Adventure } from "$lib/utils/types";
   const dispatch = createEventDispatcher();
   import { onMount } from "svelte";
-  import { addActivityType } from "$lib";
+  import { addActivityType, generateDescription, getImage } from "$lib";
   let modal: HTMLDialogElement;
 
   console.log(adventureToEdit.id);
@@ -41,6 +41,28 @@
     adventureToEdit = addActivityType(activityInput, adventureToEdit);
     activityInput = "";
   }
+
+  async function generate() {
+    try {
+      console.log(adventureToEdit.name);
+      const desc = await generateDescription(adventureToEdit.name);
+      adventureToEdit.description = desc;
+      // Do something with the updated newAdventure object
+    } catch (error) {
+      console.error(error);
+      // Handle the error
+    }
+  }
+
+  async function searchImage() {
+    try {
+      const imageUrl = await getImage(adventureToEdit.name);
+      adventureToEdit.imageUrl = imageUrl;
+    } catch (error) {
+      console.error(error);
+      // Handle the error
+    }
+  }
 </script>
 
 <dialog id="my_modal_1" class="modal">
@@ -124,6 +146,14 @@
         <!-- if there is a button in form, it will close the modal -->
         <button class="btn mt-4" on:click={close}>Close</button>
       </form>
+      <div class="flex items-center justify-center flex-wrap gap-4 mt-4">
+        <button class="btn btn-secondary" on:click={generate}
+          >Generate Description</button
+        >
+        <button class="btn btn-secondary" on:click={searchImage}
+          >Search for Image</button
+        >
+      </div>
     </div>
   </div>
 </dialog>

src/routes/worldtravel/+page.svelte

@@ -12,9 +12,10 @@
 
 <h1 class="text-center font-bold text-4xl mb-4">Country List</h1>
 
-{#each data.response as item}
+<div class="flex items-center justify-center flex-wrap">
+  {#each data.response as item}
     <button
-    class="btn btn-primary mr-4 mb-2"
+      class="btn btn-primary mr-2 ml-2 mb-2"
       on:click={() => nav(item.country_code)}
       >{item.name}
       <img
@@ -24,7 +25,8 @@
       /></button
     >
     <!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
-{/each}
+  {/each}
+</div>
 
 <svelte:head>
   <title>WorldTravel | AdventureLog</title>