feat: finished status component

src/components/lanyard.svelte

@@ -25,12 +25,12 @@ function statusColors(status: string, bg: boolean): string {
 console.log(data);
 </script>
 
-<div class="flex flex-row items-center justify-center pt-8 pb-5">
+<div class="absolute items-center top-0 left-3 mt-3">
 {#if $data && statusColors}
-    <div class={`pl-2 flex flex-col items-center border ${statusColors($data.discord_status, true)} ${statusColors($data.discord_status, false)} w-[250px] bg-opacity-5 border-opacity-30 rounded-full`}>
-        <div class="flex flex-row w-full h-[10%] pb-0">
-            <img src={`https://cdn.discordapp.com/avatars/${$data.discord_user.id}/${$data.discord_user.avatar}.webp?size=1024`} alt="Avatar" class="w-[15%] aspect-auto rounded-full" />
-            <p>{$data.discord_user.username} is on {$data.discord_status}</p> 
+    <div class={`pl-2 flex flex-col items-center border ${statusColors($data.discord_status, true)} ${statusColors($data.discord_status, false)} lg:w-2/4 w-full p-1 bg-opacity-5 border-opacity-30 rounded-lg`}>
+        <div class="flex flex-row w-full lg:pr-0 pr-1">
+          	<img src={`https://cdn.discordapp.com/avatars/${$data.discord_user.id}/${$data.discord_user.avatar}.webp?size=1024`} alt="Avatar" class="w-[15%] lg:block hidden aspect-auto rounded-full" />
+            <p class="m-auto w-full">{$data.discord_status}</p> 
         </div>
         {#if $data.activities[0] && $data.activities[0].state !== ""}
         <div class="flex flex-col h-[10%] w-full justify-center items-center">