10 lines
1.1 KiB
TypeScript
10 lines
1.1 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { Link } from "react-router-dom";
|
|
import { api, Server } from "../api/client";
|
|
import { PageState } from "../components/PageState";
|
|
import { StatusBadge } from "../components/StatusBadge";
|
|
|
|
export function Servers() { const [items, setItems] = useState<Server[]>(); const [error, setError] = useState<Error>(); useEffect(() => { api.servers().then(setItems).catch(setError); }, []); if (!items) return <PageState error={error} />;
|
|
return <><section className="title"><div><h1>Server</h1><p>{items.length} registriert</p></div></section><section className="table-wrap"><table><thead><tr><th>ID</th><th>Name</th><th>Status</th><th>Spieler</th><th>Kapazität</th><th>Port</th><th>Query Port</th><th>Wrapper</th></tr></thead><tbody>{items.map(item => <tr key={item.id}><td><Link to={`/servers/${item.id}`}>{item.id}</Link></td><td>{item.name}</td><td><StatusBadge status={item.status} /></td><td>{item.players}</td><td>{item.maxPlayers}</td><td>{item.port}</td><td>{item.queryPort}</td><td>{item.wrapperId}</td></tr>)}</tbody></table></section></>;
|
|
}
|