fixed issue when discord was missing from the config

src/app/components/Avatar.tsx

@@ -1,27 +1,18 @@
 "use client";
 
 import Image from "next/image";
+import { Fragment } from "react";
 import { useLanyardWS } from "use-lanyard";
 
 import Config from "../../../config.json";
 
+function LanyardWrapper(props: { children: any }) {
+  return <Fragment>{props.children}</Fragment>;
+}
+
 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;
+  const { discord }: any = Config;
 
   return (
     <div className="relative inline-block">
@@ -32,6 +23,34 @@ export default function Avatar(props: any) {
         height={120}
         className="rounded-full"
       />
+      {discord ? (
+        <LanyardWrapper>
+          <LanyardComponent discord={discord} />
+        </LanyardWrapper>
+      ) : null}
+    </div>
+  );
+}
+
+function LanyardComponent(props: { discord: any }) {
+  const { discord } = props;
+  const discordId = 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>
       {hasLanyard && (
         <div
           className={`absolute bottom-2 right-2 w-4 h-4 rounded-full transition ${currentStatus}`}