66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import type { ProcessItem } from './ProcessRow'
|
|
import ProcessRow from './ProcessRow'
|
|
|
|
interface ProcessTableProps {
|
|
processes: ProcessItem[]
|
|
noDevice?: boolean
|
|
}
|
|
|
|
export default function ProcessTable({ processes, noDevice }: ProcessTableProps) {
|
|
if (noDevice) {
|
|
return (
|
|
<div className="rounded-xl border border-white/10 bg-dark-300/50 overflow-hidden">
|
|
<div className="px-4 py-3 border-b border-white/10">
|
|
<h3 className="text-sm font-medium text-gray-400">
|
|
Procesos Activos (Top 10 por CPU)
|
|
</h3>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center py-16 text-gray-500">
|
|
Selecciona un dispositivo
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="rounded-xl border border-white/10 bg-dark-300/50 overflow-hidden">
|
|
<div className="px-4 py-3 border-b border-white/10">
|
|
<h3 className="text-sm font-medium text-gray-400">
|
|
Procesos Activos (Top 10 por CPU)
|
|
</h3>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-white/10 text-left text-xs font-medium uppercase tracking-wider text-gray-500">
|
|
<th className="py-3 px-4">Proceso</th>
|
|
<th className="py-3 px-4 w-20">PID</th>
|
|
<th className="py-3 px-4 w-24">CPU %</th>
|
|
<th className="py-3 px-4 w-24">Memoria</th>
|
|
<th className="py-3 px-4 w-24">Estado</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{processes.length === 0 ? (
|
|
<tr>
|
|
<td
|
|
colSpan={5}
|
|
className="py-8 text-center text-sm text-gray-500"
|
|
>
|
|
Sin datos
|
|
</td>
|
|
</tr>
|
|
) : (
|
|
processes.map((p) => (
|
|
<ProcessRow key={p.id} process={p} />
|
|
))
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|