1 files changed, 63 insertions, 38 deletions
diff --git a/src/components/DiscordStatus.astro b/src/components/DiscordStatus.astro
index b40df15..518909e 100644
--- a/src/components/DiscordStatus.astro
+++ b/src/components/DiscordStatus.astro
@@ -1,11 +1,4 @@
 ---
-const API_URL = "https://api.lanyard.rest/v1/users/246787839570739211";
-const response = await fetch(API_URL);
-const data = await response.json();
-
-const discordUser = data.data.discord_user;
-const discordStatus = data.data.discord_status;
-
 const statusColors = {
   online: "#43b581",
   idle: "#faa61a",
@@ -21,36 +14,68 @@ const statusText = {
 }
 
 ---
-
-<section style={`background-color: ${statusColors[discordStatus]};`}>
-    <img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg"alt={`${discordUser.username}'s Avatar`} />
-    <h2>Status: {statusText[discordStatus]}</h2>
+<section id="discord-status">
+  <img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ca814282eca7172c6_icon_clyde_white_RGB.svg" alt="Discord Avatar" />
+  <h2>Status: <span id="status-text"></span></h2>
 </section>
+
 <style>
-    section {
-      display: flex;
-      align-items: center;
-      padding: 20px;
-      border-radius: 10px;
-      color: white;
-      transition: background-color 0.3s ease-in-out;
-    }
-  
-    img {
-      width: 60px;
-      height: 60px;
-      border-radius: 50%;
-      margin-right: 20px;
-    }
-  
-    h2 {
-      margin: 0;
-      font-size: 1.5rem;
-    }
-  
-    p {
-      margin: 0;
-      font-size: 1rem;
-      opacity: 0.8;
-    }
-  </style>
-\ No newline at end of file
+  #discord-status {
+    display: flex;
+    align-items: center;
+    padding: 20px;
+    border-radius: 10px;
+    color: white;
+    transition: background-color 0.3s ease-in-out;
+  }
+
+  #discord-status img {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    margin-right: 20px;
+  }
+
+  #discord-status h2 {
+    margin: 0;
+    font-size: 1.5rem;
+  }
+
+  #discord-status p {
+    margin: 0;
+    font-size: 1rem;
+    opacity: 0.8;
+  }
+</style>
+
+<script>
+  const API_URL = "https://api.lanyard.rest/v1/users/246787839570739211";
+
+  fetch(API_URL)
+    .then(response => response.json())
+    .then(data => {
+      const discordUser = data.data.discord_user;
+      const discordStatus = data.data.discord_status;
+
+      const statusColors = {
+        online: "#43b581",
+        idle: "#faa61a",
+        dnd: "#f04747",
+        offline: "#747f8d",
+      };
+
+      const statusText = {
+        online: "Online",
+        idle: "Idle",
+        dnd: "Do Not Disturb",
+        offline: "Offline",
+      };
+
+      const statusSection = document.getElementById("discord-status");
+      const statusTextElement = document.getElementById("status-text");
+
+      statusSection.style.backgroundColor = statusColors[discordStatus];
+      statusTextElement.textContent = statusText[discordStatus];
+    })
+    .catch(error => console.error(error));
+</script>
+\ No newline at end of file