65 lines
3.2 KiB
TypeScript
65 lines
3.2 KiB
TypeScript
|
import type { Server } from "../types/Server";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
servers: Server[];
|
||
|
|
loading: boolean;
|
||
|
|
error: string | null;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const ServersTable = ({ servers, loading, error }: Props) => {
|
||
|
|
return (
|
||
|
|
<div className={Styles.card}>
|
||
|
|
{loading && <div className={Styles.status}>Carregando servidores...</div>}
|
||
|
|
{error && <div className={Styles.error}>{error}</div>}
|
||
|
|
{!loading && !error && servers.length === 0 && (
|
||
|
|
<div className={Styles.status}>Nenhum servidor encontrado.</div>
|
||
|
|
)}
|
||
|
|
{!loading && !error && servers.length > 0 && (
|
||
|
|
<div className={Styles.tableWrapper}>
|
||
|
|
<table className={Styles.table}>
|
||
|
|
<thead className={Styles.tableHead}>
|
||
|
|
<tr className="text-left">
|
||
|
|
<th className={Styles.tableHeadCell}>Nome</th>
|
||
|
|
<th className={Styles.tableHeadCell}>IP</th>
|
||
|
|
<th className={Styles.tableHeadCell}>Porta</th>
|
||
|
|
<th className={Styles.tableHeadCell}>Usuário</th>
|
||
|
|
<th className={Styles.tableHeadCell}>Tipo</th>
|
||
|
|
<th className={Styles.tableHeadCell}>Aplicação</th>
|
||
|
|
<th className={Styles.tableHeadCell}>Banco</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody className={Styles.tableBody}>
|
||
|
|
{servers.map((server) => (
|
||
|
|
<tr
|
||
|
|
key={server.id}
|
||
|
|
className="hover:bg-gray-50 transition-colors even:bg-gray-50/50"
|
||
|
|
>
|
||
|
|
<td className={Styles.rowCell}>{server.name}</td>
|
||
|
|
<td className={Styles.rowCell}>{server.ip}</td>
|
||
|
|
<td className={Styles.rowCell}>{server.port}</td>
|
||
|
|
<td className={Styles.rowCell}>{server.user}</td>
|
||
|
|
<td className={`${Styles.rowCell} capitalize`}>{server.type.toLowerCase()}</td>
|
||
|
|
<td className={`${Styles.rowCell} capitalize`}>{server.application.toLowerCase()}</td>
|
||
|
|
<td className={`${Styles.rowCell} capitalize`}>{server.dbType.toLowerCase()}</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
const Styles = {
|
||
|
|
card: "bg-card border border-cardBorder shadow-sm rounded-lg overflow-hidden",
|
||
|
|
status: "p-4 text-text-secondary text-sm",
|
||
|
|
error: "p-4 text-red-600 text-sm",
|
||
|
|
tableWrapper: "overflow-x-auto rounded-lg shadow-sm border border-cardBorder",
|
||
|
|
table: "min-w-full divide-y divide-cardBorder table-auto",
|
||
|
|
tableHead: "bg-gray-50 sticky top-0",
|
||
|
|
tableHeadCell: "px-4 py-3 text-left text-xs font-semibold uppercase tracking-wide text-text-secondary",
|
||
|
|
tableBody: "bg-white divide-y divide-cardBorder",
|
||
|
|
rowCell: "px-4 py-3 text-sm text-text",
|
||
|
|
};
|