From c7cd096d41a237ad2fa4a8e6475bb6b0134279d4 Mon Sep 17 00:00:00 2001
From: Gigi <47110839+DarthGigi@users.noreply.github.com>
Date: Sat, 20 Jul 2024 14:56:45 +0200
Subject: [PATCH] chore: Add Avatar and Image components for Slayer section

---
 src/lib/sections/stats/Slayer.svelte | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/lib/sections/stats/Slayer.svelte b/src/lib/sections/stats/Slayer.svelte
index c0cb67cd..b0d96392 100644
--- a/src/lib/sections/stats/Slayer.svelte
+++ b/src/lib/sections/stats/Slayer.svelte
@@ -2,14 +2,13 @@
   import AdditionStat from "$lib/components/AdditionStat.svelte";
   import Bonus from "$lib/components/Bonus.svelte";
   import type { Stats as StatsType } from "$types/stats";
-  import { Progress } from "bits-ui";
+  import { Avatar, Progress } from "bits-ui";
+  import Image from "lucide-svelte/icons/image";
   import { format } from "numerable";
   import { getContext } from "svelte";
 
   const profile = getContext<StatsType>("profile");
   const slayer = profile.slayer;
-
-  console.log(slayer);
 </script>
 
 <div class="space-y-4">
@@ -20,11 +19,17 @@
       {#each Object.entries(slayer.data) as [key, value]}
         {#if value.level.xp > 0}
           <div class="relative flex min-w-[min(20.625rem,100vw)] flex-col items-center gap-1 space-y-5 overflow-hidden rounded-lg bg-background/30">
-            <div class="flex w-full items-center justify-center border-b-2 border-icon py-2 text-center font-semibold uppercase">
+            <div class="flex w-full items-center justify-center gap-1.5 border-b-2 border-icon py-2 text-center font-semibold uppercase">
+              <Avatar.Root>
+                <Avatar.Image src={value.texture} class="size-8 object-contain" />
+                <Avatar.Fallback>
+                  <Image class="size-8" />
+                </Avatar.Fallback>
+              </Avatar.Root>
               {value.name}
             </div>
-            <div class="flex w-full flex-wrap gap-5 px-5 pb-12 uppercase">
-              {#each Object.entries(value.kills) as [key, value]}
+            <div class="flex h-full w-full flex-wrap gap-5 px-5 uppercase">
+              {#each Object.entries(value.kills) as [key, killValue]}
                 <div class="flex flex-col items-center gap-1 text-sm font-bold text-text/60">
                   <span>
                     {#if !isNaN(Number(key))}
@@ -34,13 +39,13 @@
                     {/if}
                   </span>
                   <span class="text-text">
-                    {format(value)}
+                    {format(killValue)}
                   </span>
                 </div>
               {/each}
             </div>
-            <div class="absolute bottom-0 w-full">
-              <p class="w-full space-y-5 px-5 text-center font-semibold capitalize text-text/60">
+            <div class="w-full">
+              <p class="mb-2 w-full space-y-5 px-5 text-center font-semibold capitalize text-text/60">
                 {key} Level {value.level.level}
               </p>