Update AdventureCard component to include viewType property and add radio buttons for card and map views

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

@@ -6,6 +6,8 @@
     import { goto } from "$app/navigation";
     import { onMount } from "svelte";
 
+    let viewType: String = "cards";
+
     function markVisited(event: { detail: string }) {
         console.log(`Marked ${event.detail} as visited`);
         fetch("/api/regionvisit", {
@@ -43,6 +45,10 @@
         });
     }
 
+    function setViewType(type: String) {
+        viewType = type;
+    }
+
     onMount(() => {
         console.log(data.visitedRegions);
     });
@@ -57,9 +63,28 @@
     />
 </h1>
 
-<div
+<div class="join items-center justify-center flex">
+    <input
+        class="join-item btn btn-neutral"
+        type="radio"
+        name="viewtype"
+        checked
+        aria-label="Cards"
+        on:click={() => setViewType("cards")}
+    />
+    <input
+        class="join-item btn btn-neutral"
+        type="radio"
+        name="viewtype"
+        aria-label="Map"
+        on:click={() => setViewType("map")}
+    />
+</div>
+
+{#if viewType == "cards"}
+    <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 (region.id)}
             <AdventureCard
                 type="worldtravelregion"
@@ -72,4 +97,7 @@
                 on:removeVisit={removeVisit}
             />
         {/each}
-</div>
+    </div>
+{/if}
+
+{#if viewType == "map"}{/if}