From 37d9182af74635e948e8092a7336907704f8a93e Mon Sep 17 00:00:00 2001
From: Pinapelz <donaldshan1@outlook.com>
Date: Wed, 20 Sep 2023 02:01:02 -0700
Subject: Implement about page - Discord Status component

---
 src/components/DiscordStatus.astro | 49 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 src/components/DiscordStatus.astro

(limited to 'src/components/DiscordStatus.astro')

diff --git a/src/components/DiscordStatus.astro b/src/components/DiscordStatus.astro
new file mode 100644
index 0000000..8365418
--- /dev/null
+++ b/src/components/DiscordStatus.astro
@@ -0,0 +1,49 @@
+---
+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",
+  dnd: "#f04747",
+  offline: "#747f8d",
+};
+
+---
+
+<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: {discordStatus}</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
-- 
cgit v1.2.3