Show online member discord

docs/src/containers/SocialButton/index.js

@@ -2,9 +2,11 @@ import React from "react";
 import { FaGithub, FaDiscord } from "react-icons/fa";
 import { RiStarSFill } from "react-icons/ri";
 import { useAppStars } from "@site/src/hooks/useAppStars";
+import { useDiscordWidget } from "@site/src/hooks/useDiscordWidget";
 
 export default function SocialButton() {
   const { stargazers } = useAppStars();
+  const { data } = useDiscordWidget();
 
   return (
     <div className="flex items-center space-x-2 justify-start">
@@ -36,7 +38,7 @@ export default function SocialButton() {
           <p className="text-base">Discord</p>
           <div className="text-sm text-white flex items-center space-x-1">
             <div className="w-2 h-2 bg-green-500 rounded-full" />
-            <span>{stargazers.count} online</span>
+            <span>{data.presence_count} online</span>
           </div>
         </div>
       </a>

docs/src/hooks/useDiscordWidget.js

@@ -0,0 +1,28 @@
+import React, { useEffect, useState } from "react";
+
+import axios from "axios";
+import { isAxiosError } from "axios";
+
+export const useDiscordWidget = () => {
+  const [data, setData] = useState({});
+
+  useEffect(() => {
+    const updateData = async () => {
+      try {
+        const { data } = await axios.get(
+          "https://discord.com/api/guilds/1107178041848909847/widget.json"
+        );
+        setData({
+          ...data,
+        });
+      } catch (error) {
+        if (isAxiosError(error)) {
+          console.error("Failed to get stargazers:", error);
+        }
+      }
+    };
+    updateData();
+  }, []);
+
+  return { data };
+};