remove react

src/components/Avatar.astro

@@ -0,0 +1,52 @@
+---
+import { Image } from "astro:assets"
+import logo from "@assets/logo.png"
+---
+
+<div class="avatar-wrapper">
+	<Image
+		alt="My profile picture"
+		src={logo}
+		class="avatar"
+		width={80}
+		height={80}
+		aria-hidden
+	/>
+</div>
+
+<style>
+	.avatar-wrapper {
+		width: 80px;
+		height: 80px;
+		clip-path: var(--clip-avatar-outer);
+		background-color: var(--overlay0);
+	}
+	.avatar {
+		width: 80px;
+		height: 80px;
+		clip-path: var(--clip-avatar-inner);
+	}
+</style>
+
+<script>
+	const colours = {
+		"online": "var(--green)",
+		"idle": "var(--yellow)",
+		"dnd": "var(--red)",
+		"offline": "var(--overlay0)"
+	};
+	const avatarWrapper: HTMLElement = document.querySelector(".avatar-wrapper");
+
+	window.addEventListener('lanyard-update', (e: CustomEvent) => {
+		const presence = e.detail;
+		avatarWrapper.animate(
+			[
+				{ backgroundColor: colours[presence.discord_status] ?? colours.offline }
+			],
+			{
+				duration: 100,
+				fill: "forwards"
+			},
+		);
+	});
+</script>