add api request

src/app/components/Dashboard.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Link } from "react-router";
 import {
   Server,
@@ -22,10 +22,13 @@ interface ServerStatus {
 }
 
 export function Dashboard() {
-  const [servers] = useState<ServerStatus[]>([
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+    
+  const [servers,setServers] = useState<ServerStatus[]>([
     {
       id: "1",
-      name: "Production API",
+      name: "Production APIs",
       url: "https://api.example.com",
       status: "online",
       responseTime: 142,
@@ -85,6 +88,28 @@ export function Dashboard() {
     },
   ]);
 
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch('https://bitrix.tavres.ru/rest/1/2jkuss1wwr0vnkkt/iblock.servers');
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        const result = await response.json();
+        setServers([...servers, ...result['result']]);
+        setError(null);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+    const intervalId = setInterval(fetchData, 5000);
+    return () => clearInterval(intervalId);
+  },[])
+  
   const onlineCount = servers.filter((s) => s.status === "online").length;
   const offlineCount = servers.filter((s) => s.status === "offline").length;
   const warningCount = servers.filter((s) => s.status === "warning").length;

src/main.tsx

@@ -1,7 +1,6 @@
+import { createRoot } from "react-dom/client";
+import App from "./app/App.tsx";
+import "./styles/index.css";
 
-  import { createRoot } from "react-dom/client";
-  import App from "./app/App.tsx";
-  import "./styles/index.css";
-
-  createRoot(document.getElementById("root")!).render(<App />);
+createRoot(document.getElementById("root")!).render(<App />);