2021-05-30 18:16:55 +09:00
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
|
import axios from 'axios';
|
2021-05-24 01:22:46 +09:00
|
|
|
|
|
|
|
const App = () => {
|
2021-05-30 18:16:55 +09:00
|
|
|
const [data, setData] = useState({ hits: [] });
|
|
|
|
useEffect(() => {
|
|
|
|
const fetchData = async () => {
|
|
|
|
const result = await axios(
|
|
|
|
'https://discord.com/api/guilds/723409709306216498/widget.json',
|
|
|
|
);
|
|
|
|
setData(result.data);
|
|
|
|
};
|
|
|
|
fetchData();
|
2021-05-24 01:22:46 +09:00
|
|
|
}, []);
|
2021-06-19 18:01:47 +09:00
|
|
|
const str = JSON.stringify(data)
|
2021-06-19 18:08:49 +09:00
|
|
|
let status = 0
|
2021-06-19 18:01:47 +09:00
|
|
|
if (str.indexOf("status") !== -1){
|
|
|
|
status = data.members && data.members[0].status;
|
|
|
|
}
|
2021-05-30 18:16:55 +09:00
|
|
|
return (
|
|
|
|
<>
|
2021-06-02 15:06:27 +09:00
|
|
|
<div className="z-50 w-6 transform translate-y-3/4 -translate-x-full">
|
2021-05-30 18:16:55 +09:00
|
|
|
{
|
|
|
|
(() => {
|
2021-06-19 18:01:47 +09:00
|
|
|
if (status == 0) {
|
|
|
|
return <div className="text-gray-700 rounded-full bg-gray-500 flex w-6 h-6"></div>
|
|
|
|
}else{
|
2021-05-30 18:16:55 +09:00
|
|
|
if (status == "online"){
|
2021-06-02 15:06:27 +09:00
|
|
|
return <div className="text-green-700 rounded-full bg-green-500 flex w-6 h-6"></div>
|
2021-05-30 18:16:55 +09:00
|
|
|
} else if (status == "idle"){
|
2021-06-02 15:06:27 +09:00
|
|
|
return <div className="text-yellow-700 rounded-full bg-green-500 flex w-6 h-6"></div>
|
2021-05-30 18:16:55 +09:00
|
|
|
} else {
|
2021-06-19 18:01:47 +09:00
|
|
|
return <div className="text-yellow-700 rounded-full bg-red-500 flex w-6 h-6"></div>
|
|
|
|
}
|
|
|
|
}
|
2021-05-30 18:16:55 +09:00
|
|
|
})()
|
2021-05-24 01:22:46 +09:00
|
|
|
}
|
2021-05-30 18:26:40 +09:00
|
|
|
</div>
|
2021-05-30 18:16:55 +09:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
2021-05-24 01:22:46 +09:00
|
|
|
|
|
|
|
export default App;
|