website/src/components/Me.astro
2025-03-14 23:23:27 -04:00

45 lines
No EOL
1 KiB
Text

---
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;
}
h3 {
font-weight: 400;
margin-left: 20px;
margin-top: auto;
margin-bottom: auto;
}
img {
width: 90px;
height: 90px;
border-radius: 6px;
box-shadow: 10px black;
border-color: var(--statusColor);
border-style: solid;
border-width: 2px;
}
</style>
<div>
<img src="logo.png" alt="the nin0dev logo">
<h3>nin0 <span style="font-size: 0.4em;">(he/him)</span></h3>
</div>