yude
/
yude.jp
mirror of https://github.com/yude-jp/yude.jp
0
0
Fork 0
Code Releases Activity

Add Discord's status badge

This commit is contained in:
yude 2021-05-24 01:22:46 +09:00
parent c147a60690
commit 3a70be536b
Signed by: yude
GPG Key ID: EB0FE5D925C4A968
2 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
pages/components/DiscordStatus.js Normal file
View File

@ -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;

8
pages/profile.js
View File

@ -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>