add discord status

src/app/components/Avatar.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Image from "next/image";
+import { useLanyardWS } from "use-lanyard";
+
+import Config from "../../../config.json";
+
+export default function Avatar(props: any) {
+  const { avatar } = props;
+
+  const discordId: any = Config.discord.id;
+  const lanyardData = useLanyardWS(discordId);
+  const hasLanyard = lanyardData != undefined;
+
+  const statusColor = {
+    online: "bg-green-400",
+    offline: "bg-slate-400",
+    dnd: "bg-red-500",
+    idle: "bg-orange-400",
+  };
+  const currentStatus =
+    lanyardData != undefined
+      ? statusColor[lanyardData.discord_status]
+      : undefined;
+
+  return (
+    <div className="relative inline-block">
+      <Image
+        src={avatar}
+        alt="Avatar"
+        width={120}
+        height={120}
+        className="rounded-full"
+      />
+      {hasLanyard && (
+        <div
+          className={`absolute bottom-2 right-2 w-4 h-4 rounded-full transition ${currentStatus}`}
+        />
+      )}
+    </div>
+  );
+}

src/app/page.tsx

@@ -5,6 +5,7 @@ import { fas } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import Config from "../../config.json";
+import Avatar from "./components/Avatar";
 
 library.add(fab, far, fas); // Loading in the icons from FontAwesome
 
@@ -77,13 +78,7 @@ export default function Home() {
         >
           <div className="m-5">
             <div className="flex flex-col items-center justify-center">
-              <Image
-                src={avatar}
-                alt="Avatar"
-                width={120}
-                height={120}
-                className="rounded-full"
-              />
+              <Avatar avatar={avatar} />
               <div className="mb-3"></div>
               <h1 className="text-4xl font-bold">{name}</h1>
             </div>