Update AdventureCard component and add country flag support

src/lib/components/AdventureCard.svelte

@@ -6,10 +6,10 @@
 
   export let type: String;
 
-  export let name: String;
+  export let name: String | undefined = undefined;
-  export let location: String;
+  export let location: String | undefined = undefined;
-  export let created: string;
+  export let created: String | undefined = undefined;
-  export let id: Number;
+  export let id: Number | undefined = undefined;
 
   function remove() {
     dispatch("remove", id);
@@ -103,3 +103,16 @@
     </div>
   </div>
 {/if}
+
+{#if type === "worldtravelregion"}
+  <div
+    class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral shadow-xl overflow-hidden"
+  >
+    <div class="card-body">
+      <h2 class="card-title overflow-ellipsis">{name}</h2>
+      <div class="card-actions justify-end">
+        <button class="btn btn-primary">Mark Visited</button>
+      </div>
+    </div>
+  </div>
+{/if}

src/lib/index.ts

@@ -1,4 +1,43 @@
 // place files you want to import through the `$lib` alias in this folder.
+export function countryCodeToName(countryCode: string) {
+  switch (countryCode) {
+    case "us":
+      return "United States";
+    case "de":
+      return "Germany";
+    case "fr":
+      return "France";
+    case "gb":
+      return "United Kingdom";
+    case "ar":
+      return "Argentina";
+    case "mx":
+      return "Mexico";
+    case "jp":
+      return "Japan";
+    case "cn":
+      return "China";
+    case "in":
+      return "India";
+    case "au":
+      return "Australia";
+    case "nz":
+      return "New Zealand";
+    case "za":
+      return "South Africa";
+    case "eg":
+      return "Egypt";
+    case "ca":
+      return "Canada";
+    case "br":
+      return "Brazil";
+  }
+}
+
+export function getFlag(country: string) {
+  return `https://flagcdn.com/h24/${country}.png`;
+}
+    
 export function generateRandomString() {
   let randomString = "";
   const digits =

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}
+<h1 class="text-center text-4xl font-bold">
-    <p>{region.name}</p>
+    Regions in {countryCodeToName(data.countrycode)}
-{/each}
+    <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>