Add Discord's status badge

pages/components/DiscordStatus.js

@@ -0,0 +1,27 @@
+import React from "react";
+
+const url = "https://discordapp.com/api/guilds/550309736214691840/widget.json";
+const App = () => {
+  const [status, setStatus] = React.useState(0);
+  React.useEffect(() => {
+    fetch(url)
+      .then((r) => r.json())
+      .then((j) => setStatus(j.members[15].status))
+  }, []);
+    
+  if (status === "online") {
+    return <div className="font-bold text-gray-700 rounded-full bg-green-500 flex w-5 h-5 items-center justify-center"></div>
+  }else{
+    if (status === "idle") {
+      return <div className="font-bold text-gray-700 rounded-full bg-yellow-500 flex w-5 h-5 items-center justify-center"></div>
+    }else{
+      if (status === "dnd") {
+        return <div className="font-bold text-gray-700 rounded-full bg-red-500 flex w-5 h-5 items-center justify-center"></div>
+      }else{
+        return <div className="font-bold text-gray-700 rounded-full bg-gray-500 flex w-5 h-5 items-center justify-center"></div>
+      }
+    }
+  }
+};
+
+export default App;

pages/profile.js

@@ -5,7 +5,7 @@ import { faEnvelope, faBirthdayCake, faMapPin, faSchool, faPhone, faInfo, faKey,
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
 import Image from 'next/image'
-
+import DiscordStatus from './components/DiscordStatus'
 import { useRouter } from 'next/router'
 
 export default function About(props) {
@@ -40,14 +40,18 @@ export default function About(props) {
         }
         <div className="mb-5 flex justify-center">
           <div>
+          <div className="z-50 transform translate-x-40 translate-y-48">
+          <DiscordStatus />
+          </div>
           <Image
-            className   = "object-contain rounded-full animate-pulse hover:animate-rumble"
+            className   = "object-contain rounded-full hover:animate-rumble z-0"
             src         = "/static/images/avatar.png"
             alt         = "yude's avatar"
             width       = {200}
             height      = {200}
             unoptimized = {true}
         />
+        
           <p className="text-center text-4xl subpixel-antialiased">yude</p>
           </div>
         </div>