Update AdventureCard component and add country flag support

src/routes/worldtravel/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
+    import { getFlag } from "$lib";
     import AdventureCard from "$lib/components/AdventureCard.svelte";
 
     export let data: any;
@@ -7,9 +8,6 @@
     async function nav(loc: string) {
         goto(`/worldtravel/${loc}`);
     }
-    function getFlag(country: string) {
-        return `https://flagcdn.com/h24/${country}.png`;
-    }
 </script>
 
 <h1 class="text-center font-bold text-4xl mb-4">Country List</h1>

src/routes/worldtravel/[countrycode]/+page.server.ts

@@ -13,5 +13,6 @@ export const load: PageServerLoad  = async ({ params, locals })  => {
     .where(eq(worldTravelCountryRegions.country_code, countrycode))
   return {
       regions : data,
+      countrycode: countrycode,
   };
 }

src/routes/worldtravel/[countrycode]/+page.svelte

@@ -1,7 +1,23 @@
 <script lang="ts">
     export let data;
+    import AdventureCard from "$lib/components/AdventureCard.svelte";
+    import { countryCodeToName } from "$lib";
+    import { getFlag } from "$lib";
 </script>
 
-{#each data.regions as region}
-    <p>{region.name}</p>
-{/each}
+<h1 class="text-center text-4xl font-bold">
+    Regions in {countryCodeToName(data.countrycode)}
+    <img
+        src={getFlag(data.countrycode)}
+        class="inline-block -mt-1 mr-1"
+        alt="Flag"
+    />
+</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 data.regions as region}
+        <AdventureCard type="worldtravelregion" name={region.name} />
+    {/each}
+</div>