From 3a70be536b608a247512a1210e99277c472e7949 Mon Sep 17 00:00:00 2001
From: yudejp <i@yude.jp>
Date: Mon, 24 May 2021 01:22:46 +0900
Subject: [PATCH] Add Discord's status badge

---
 pages/components/DiscordStatus.js | 27 +++++++++++++++++++++++++++
 pages/profile.js                  |  8 ++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 pages/components/DiscordStatus.js

diff --git a/pages/components/DiscordStatus.js b/pages/components/DiscordStatus.js
new file mode 100644
index 0000000..64755f9
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/pages/profile.js b/pages/profile.js
index 0017a76..cf43c0f 100644
--- a/pages/profile.js
+++ b/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>