Added presence

src/components/Me.astro

@@ -1,4 +1,24 @@
-<style>
+---
+import {fetchUserData, type DiscordStatus} from "lanyard-wrapper";
+
+const rawUserData = await fetchUserData("886685857560539176");
+const statusColor = () => {
+    switch (rawUserData.discord_status) {
+        case "online":
+        return "#23a55a";
+        case "idle":
+        return "#f0b232";
+        case "dnd":
+        return "#f23f43";
+        case "offline":
+        return "#80848e";
+        default:
+        return "#80848e";
+    }   
+};
+---
+
+<style define:vars={{statusColor: statusColor()}}>
     div {
         display: flex;
     }
@@ -13,7 +33,7 @@
         height: 90px;
         border-radius: 6px;
         box-shadow: 10px black;
-        border-color: var(--offline-color);
+        border-color: var(--statusColor);
         border-style: solid;
         border-width: 2px;
     }

src/components/Presence.astro

@@ -0,0 +1,55 @@
+---
+import {fetchUserData} from "lanyard-wrapper";
+
+const rawUserData = await fetchUserData("886685857560539176");
+const activity = (() => {
+    let finalActivity = {
+        type: undefined,
+        name: undefined,
+        artist: undefined
+    };
+    rawUserData.activities.some((activity => {
+        if(activity.type === 0) {
+            finalActivity = {
+                type: "playing",
+                name: activity.name,
+                artist: undefined
+            };
+            return;
+        }
+    }));
+    if(finalActivity.type !== undefined) return finalActivity;
+    if(rawUserData.listening_to_spotify) {
+        finalActivity = {
+            type: "listening",
+            name: rawUserData.spotify.song,
+            artist: rawUserData.spotify.artist
+        };
+    };
+    return finalActivity;
+})();
+---
+
+<style>
+    div {
+        margin-top: 10px;
+        display: flex;
+    }
+    p {
+        margin-top: auto;
+        margin-bottom: auto;
+        margin-left: 10px;
+    }
+    img {
+        width: 30px;
+        height: 30px;
+    }
+</style>
+
+{
+    activity.type !== undefined &&
+    <div>
+        <img src={activity.type === "playing" ? "/game.ico" : "/music.ico"}>
+        <p>{`${activity.type === "playing" ? "Playing" : "Listening to"} ${activity.name}${activity.type === "listening" ? ` - ${activity.artist}` : ""}`}</p>
+    </div>
+}