From 6fd360a9d0e90153f86518fa2fbf34b453693e02 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 13 Jun 2024 16:50:18 +0000
Subject: [PATCH 1/2] New country list layout!

---
 src/lib/components/CountryCard.svelte         | 34 +++++++++++++++++++
 ...rldTravelCard.svelte => RegionCard.svelte} |  2 +-
 src/routes/worldtravel/+page.svelte           | 19 +++--------
 .../worldtravel/[countrycode]/+page.svelte    |  6 ++--
 4 files changed, 41 insertions(+), 20 deletions(-)
 create mode 100644 src/lib/components/CountryCard.svelte
 rename src/lib/components/{WorldTravelCard.svelte => RegionCard.svelte} (89%)

diff --git a/src/lib/components/CountryCard.svelte b/src/lib/components/CountryCard.svelte
new file mode 100644
index 0000000..ed4d3c0
--- /dev/null
+++ b/src/lib/components/CountryCard.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import { getFlag } from "$lib";
+  import { createEventDispatcher } from "svelte";
+  const dispatch = createEventDispatcher();
+
+  export let countryName: string | undefined = undefined;
+  export let countryCode: string;
+
+  async function nav() {
+    goto(`/worldtravel/${countryCode}`);
+  }
+</script>
+
+<div
+  class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
+>
+  <figure>
+    <!-- svelte-ignore a11y-img-redundant-alt -->
+    <img
+      src={getFlag(240, countryCode) ||
+        "https://placehold.co/300?text=No%20Image%20Found&font=roboto"}
+      alt="No image available"
+      class="w-full h-48 object-cover"
+    />
+  </figure>
+  <div class="card-body">
+    <h2 class="card-title overflow-ellipsis">{countryName}</h2>
+    <div class="card-actions justify-end">
+      <!-- <button class="btn btn-info" on:click={moreInfo}>More Info</button> -->
+      <button class="btn btn-primary" on:click={nav}>Open</button>
+    </div>
+  </div>
+</div>
diff --git a/src/lib/components/WorldTravelCard.svelte b/src/lib/components/RegionCard.svelte
similarity index 89%
rename from src/lib/components/WorldTravelCard.svelte
rename to src/lib/components/RegionCard.svelte
index 99acd6b..a736b27 100644
--- a/src/lib/components/WorldTravelCard.svelte
+++ b/src/lib/components/RegionCard.svelte
@@ -22,7 +22,7 @@
 </script>
 
 <div
-  class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl overflow-hidden text-base-content"
+  class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
 >
   <div class="card-body">
     <h2 class="card-title overflow-ellipsis">{name}</h2>
diff --git a/src/routes/worldtravel/+page.svelte b/src/routes/worldtravel/+page.svelte
index 7267c09..dd75f84 100644
--- a/src/routes/worldtravel/+page.svelte
+++ b/src/routes/worldtravel/+page.svelte
@@ -2,28 +2,17 @@
   import { goto } from "$app/navigation";
   import { getFlag } from "$lib";
   import AdventureCard from "$lib/components/AdventureCard.svelte";
+  import CountryCard from "$lib/components/CountryCard.svelte";
 
   export let data: any;
-
-  async function nav(loc: string) {
-    goto(`/worldtravel/${loc}`);
-  }
+  console.log(data);
 </script>
 
 <h1 class="text-center font-bold text-4xl mb-4">Country List</h1>
 
-<div class="flex items-center justify-center flex-wrap">
+<div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
   {#each data.response as item}
-    <button
-      class="btn btn-primary mr-2 ml-2 mb-2"
-      on:click={() => nav(item.country_code)}
-      >{item.name}
-      <img
-        src={getFlag(24, item.country_code)}
-        class="inline-block -mt-1 mr-1"
-        alt="Flag"
-      /></button
-    >
+    <CountryCard countryCode={item.country_code} countryName={item.name} />
     <!-- <p>Name: {item.name}, Continent: {item.continent}</p> -->
   {/each}
 </div>
diff --git a/src/routes/worldtravel/[countrycode]/+page.svelte b/src/routes/worldtravel/[countrycode]/+page.svelte
index 941b10a..fed9853 100644
--- a/src/routes/worldtravel/[countrycode]/+page.svelte
+++ b/src/routes/worldtravel/[countrycode]/+page.svelte
@@ -5,7 +5,7 @@
   import { goto } from "$app/navigation";
   import { onMount } from "svelte";
   import Us from "$lib/components/maps/US.svelte";
-  import WorldTravelCard from "$lib/components/WorldTravelCard.svelte";
+  import WorldTravelCard from "$lib/components/RegionCard.svelte";
 
   let viewType: String = "cards";
 
@@ -83,9 +83,7 @@
 </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"
-  >
+  <div class="flex flex-wrap gap-4 mr-4 ml-4 justify-center content-center">
     {#each data.regions as region (region.id)}
       <WorldTravelCard
         countryCode={data.countrycode}

From fc8a162aa92744bb1076a707f9574ee7e35899aa Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Thu, 13 Jun 2024 17:13:39 +0000
Subject: [PATCH 2/2] chore: Update UserAvatar component to use button for
 profile navigation

---
 src/lib/components/UserAvatar.svelte |  2 +-
 src/routes/profile/+page.server.ts   | 11 +++++++++
 src/routes/profile/+page.svelte      | 34 ++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/profile/+page.server.ts
 create mode 100644 src/routes/profile/+page.svelte

diff --git a/src/lib/components/UserAvatar.svelte b/src/lib/components/UserAvatar.svelte
index e1d4756..949b549 100644
--- a/src/lib/components/UserAvatar.svelte
+++ b/src/lib/components/UserAvatar.svelte
@@ -30,7 +30,7 @@
     <!-- svelte-ignore a11y-missing-attribute -->
     <!-- svelte-ignore a11y-missing-attribute -->
     <p class="text-lg ml-4 font-bold">Hi, {user.first_name} {user.last_name}</p>
-    <li><a>Profile</a></li>
+    <li><button on:click={() => goto("/profile")}>Profile</button></li>
     <li><button on:click={navToLog}>My Log</button></li>
     <li><button on:click={navToSettings}>User Settings</button></li>
     {#if user.role == "admin"}
diff --git a/src/routes/profile/+page.server.ts b/src/routes/profile/+page.server.ts
new file mode 100644
index 0000000..a891da6
--- /dev/null
+++ b/src/routes/profile/+page.server.ts
@@ -0,0 +1,11 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad, RequestEvent } from "../$types";
+
+export const load: PageServerLoad = async (event: RequestEvent) => {
+  if (!event.locals.user) {
+    return redirect(302, "/login");
+  }
+  return {
+    user: event.locals.user,
+  };
+};
diff --git a/src/routes/profile/+page.svelte b/src/routes/profile/+page.svelte
new file mode 100644
index 0000000..88a8e91
--- /dev/null
+++ b/src/routes/profile/+page.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import type { PageData } from "./$types";
+
+  export let data: PageData;
+</script>
+
+<!--
+// v0 by Vercel.
+// https://v0.dev/t/EtPnDdQYcbn
+-->
+
+<!--
+// v0 by Vercel.
+// https://v0.dev/t/DYwTru570WN
+-->
+
+{#if data.user.icon}
+  <div class="avatar flex items-center justify-center">
+    <div class="w-24 rounded">
+      <img src={data.user.icon} class="w-24 rounded-full" />
+    </div>
+  </div>
+{/if}
+
+<h1 class="text-center text-4xl font-bold">
+  {data.user.first_name}, {data.user.last_name}
+</h1>
+<p class="text-center text-lg mt-2">{data.user.username}</p>
+
+<p class="ml-1 text-lg text-center mt-4">Member Since</p>
+<div class="flex items-center justify-center text-center">
+  <iconify-icon icon="mdi:calendar" class="text-2xl"></iconify-icon>
+  <p class="ml-1 text-xl">{data.user.signup_date.toDateString()}</p>
+</div>