chore: Add Avatar and Image components for Slayer section

SkyCryptWebsite · Jul 20, 2024 · c7cd096 · c7cd096
1 parent c430fcd
commit c7cd096
Showing 1 changed file with 14 additions and 9 deletions.
diff --git 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>