init

components/ServerWidget.tsx

@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from 'react';
+import { Server } from '../types';
+import ping from './utils/jsping.js';
+
+interface ServerWidgetProps {
+  config: {
+    serverWidget: {
+      enabled: boolean;
+      pingFrequency: number;
+      servers: Server[];
+    };
+  };
+}
+
+const ServerWidget: React.FC<ServerWidgetProps> = ({ config }) => {
+  const [serverStatus, setServerStatus] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    const pingServers = () => {
+      config.serverWidget.servers.forEach((server) => {
+        setServerStatus((prevStatus) => ({ ...prevStatus, [server.id]: 'pending' }));
+        ping(server.address)
+          .then(() => {
+            setServerStatus((prevStatus) => ({ ...prevStatus, [server.id]: 'online' }));
+          })
+          .catch(() => {
+            setServerStatus((prevStatus) => ({ ...prevStatus, [server.id]: 'offline' }));
+          });
+      });
+    };
+
+    if (config.serverWidget.enabled) {
+      pingServers();
+      const interval = setInterval(pingServers, config.serverWidget.pingFrequency * 1000);
+      return () => clearInterval(interval);
+    }
+  }, [config.serverWidget.enabled, config.serverWidget.servers, config.serverWidget.pingFrequency]);
+
+  if (!config.serverWidget.enabled) {
+    return null;
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'online':
+        return 'bg-green-500';
+      case 'offline':
+        return 'bg-red-500';
+      default:
+        return 'bg-gray-500';
+    }
+  };
+
+  return (
+    <div className="fixed bottom-0 left-1/2 -translate-x-1/2 w-auto max-w-full">
+      <div className="flex items-center gap-4 bg-black/25 backdrop-blur-md border border-white/20 px-4 py-2 shadow-lg"
+        style={{ borderBottomLeftRadius: '0', borderBottomRightRadius: '0', borderTopLeftRadius: '16px', borderTopRightRadius: '15px', borderBottomWidth: '0' }}
+      >
+        {config.serverWidget.servers.map((server) => (
+          <div key={server.id} className="flex items-center gap-2">
+            <div className={`w-3 h-3 rounded-full ${getStatusColor(serverStatus[server.id])}`}></div>
+            <span className="text-slate-100 text-sm font-medium">
+              {server.name}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ServerWidget;