From 4473ee87ec24eea755cc1dfbfad15328509cd0d7 Mon Sep 17 00:00:00 2001
From: ellielle <40385743+ellielle@users.noreply.github.com>
Date: Mon, 3 Jun 2024 17:43:49 -0400
Subject: [PATCH] add component for user avatar

---
 frontend/src/components/UI/Avatar.svelte | 18 ++++++++++++++++++
 frontend/src/components/UI/Tabs.svelte   | 12 ++++++++----
 2 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/UI/Avatar.svelte

diff --git a/frontend/src/components/UI/Avatar.svelte b/frontend/src/components/UI/Avatar.svelte
new file mode 100644
index 0000000..5e0d2de
--- /dev/null
+++ b/frontend/src/components/UI/Avatar.svelte
@@ -0,0 +1,18 @@
+<script>
+  export let image;
+  export let handle;
+</script>
+
+<main>
+  <label for="img-profile">
+    <img src={image} alt={handle} id="img-profile" />
+  </label>
+</main>
+
+<style>
+  #img-profile {
+    width: 40px;
+    height: auto;
+    border-radius: 50%;
+  }
+</style>
diff --git a/frontend/src/components/UI/Tabs.svelte b/frontend/src/components/UI/Tabs.svelte
index 45031a2..11209c6 100644
--- a/frontend/src/components/UI/Tabs.svelte
+++ b/frontend/src/components/UI/Tabs.svelte
@@ -2,6 +2,7 @@
   import Archmages from "../content/Archmages.svelte";
   import General from "../content/General.svelte";
   import XPMeter from "../UI/XPMeter.svelte";
+  import Avatar from "../UI/Avatar.svelte";
   import Stats from "../content/Stats.svelte";
   import { Tab, TabGroup } from "@skeletonlabs/skeleton";
   import { User } from "../../stores/user";
@@ -10,10 +11,12 @@
   let tabSet = 0;
   let tabs = ["General", "Courses", "Stats", "Boss Battle", "Archmages"];
 
-  // Setting some convenience variables so it doesn't look ugly
-  let level = $User.userData.Level;
-  let currentXP = $User.userData.XPForLevel;
-  let levelXP = $User.userData.XPTotalForLevel;
+  // Setting some convenience variables so it is easier to follow
+  $: level = $User.userData.Level;
+  $: currentXP = $User.userData.XPForLevel;
+  $: levelXP = $User.userData.XPTotalForLevel;
+  $: image = $User.userData.ProfileImageURL;
+  $: handle = $User.userData.Handle;
 </script>
 
 <main>
@@ -50,6 +53,7 @@
     </svelte:fragment>
     {#if $User.isLoggedIn}
       <XPMeter {level} {currentXP} {levelXP} />
+      <Avatar {image} {handle} />
     {/if}
   </TabGroup>
 </main>