87 lines
1.7 KiB
TypeScript
87 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
type EstadoPC = 'libre' | 'ocupada' | 'fallo';
|
|
|
|
const colores: Record<EstadoPC, string> = {
|
|
libre: '#22c55e', // verde
|
|
ocupada: '#ef4444', // rojo
|
|
fallo: '#facc15', // amarillo
|
|
};
|
|
|
|
const pcs = [
|
|
{
|
|
id: 'PC-01',
|
|
x: 120,
|
|
y: 180,
|
|
width: 40,
|
|
height: 40,
|
|
estado: 'libre' as EstadoPC,
|
|
},
|
|
{
|
|
id: 'PC-02',
|
|
x: 170,
|
|
y: 180,
|
|
width: 40,
|
|
height: 40,
|
|
estado: 'ocupada' as EstadoPC,
|
|
},
|
|
{
|
|
id: 'PC-03',
|
|
x: 220,
|
|
y: 180,
|
|
width: 40,
|
|
height: 40,
|
|
estado: 'fallo' as EstadoPC,
|
|
},
|
|
];
|
|
|
|
export default function DSC() {
|
|
return (
|
|
<svg viewBox="0 0 1500 900" width="100%" height="auto">
|
|
|
|
{/* FONDO */}
|
|
<image
|
|
href="/plano.svg"
|
|
width="100%"
|
|
height="100%"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
pointerEvents="none"
|
|
/>
|
|
|
|
{/* CAPA INTERACTIVA */}
|
|
<g>
|
|
{pcs.map(pc => (
|
|
<g key={pc.id}>
|
|
{/* CUADRO */}
|
|
<rect
|
|
x={pc.x}
|
|
y={pc.y}
|
|
width={pc.width}
|
|
height={pc.height}
|
|
fill={colores[pc.estado]}
|
|
stroke="#bb4242"
|
|
strokeWidth={1}
|
|
rx={4}
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={() => console.log(pc.id)}
|
|
/>
|
|
|
|
{/* NÚMERO */}
|
|
<text
|
|
x={pc.x + pc.width / 2}
|
|
y={pc.y + pc.height / 2 + 5}
|
|
textAnchor="middle"
|
|
fontSize={12}
|
|
fill="#000"
|
|
pointerEvents="none"
|
|
>
|
|
{pc.id.replace('PC-', '')}
|
|
</text>
|
|
</g>
|
|
))}
|
|
</g>
|
|
|
|
</svg>
|
|
);
|
|
}
|