1 files changed, 83 insertions, 0 deletions
diff --git a/src/components/DiscordActivity.astro b/src/components/DiscordActivity.astro
new file mode 100644
index 0000000..2d59c1f
--- /dev/null
+++ b/src/components/DiscordActivity.astro
@@ -0,0 +1,83 @@
+<script>
+  async function fetchData() {
+    const API_URL = "https://api.lanyard.rest/v1/users/246787839570739211";
+
+    try {
+      const response = await fetch(API_URL);
+      const data = await response.json();
+
+      if (data && data.success) {
+        const activities = data.data.activities;
+        let activityHTML = "";
+        for (const activity of activities) {
+          const imageUrl =
+            activity.assets && activity.assets.large_image
+              ? activity.assets.large_image
+              : "";
+
+          activityHTML += `
+              <div class="activity-card">
+                <h3>${activity.name}</h3>
+                <p>${activity.details ? activity.details : ""}</p>
+                <p>${activity.state ? activity.state : ""}</p>
+              </div>
+            `;
+        }
+
+        document.querySelector("#activities").innerHTML = activityHTML;
+      } else {
+        console.error("Failed fetching user data:", data.message);
+      }
+    } catch (error) {
+      console.error("Network error:", error);
+    }
+  }
+
+  window.addEventListener("DOMContentLoaded", fetchData);
+</script>
+
+<section>
+  <div>
+    <div id="activities"></div>
+  </div>
+</section>
+<style>
+section {
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 24px;
+    border-radius: 12px;
+    background-color: #1a1a1a; 
+    font-family: 'Courier New', Courier, monospace;
+    color: #c0c0c0;
+}
+
+
+.activity-card {
+    background-color: #1a1a1a;
+    padding: 20px;
+    margin-bottom: 16px;
+    border: 1px solid #c0c0c0;
+    display: flex;
+    flex-direction: column;
+}
+
+.activity-card h3 {
+    margin-top: 0;
+    margin-bottom: 8px; 
+}
+
+.activity-card p {
+    margin: 0;
+    font-size: 0.5em;
+    line-height: 1.5;
+    padding: 4px 0;
+}
+
+.activity-card p + p {
+    margin-top: 6px;
+    border-top: 1px dashed #c0c0c0;
+    padding-top: 8px;
+}
+
+</style>