55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
|
import { Monitor, DoorOpen } from "lucide-react";
|
||
|
|
import { ComputerCard } from "./computer-card";
|
||
|
|
import { useMachineNumber } from "../hooks/useMachineNumber";
|
||
|
|
|
||
|
|
export function DeviceGrid({ devices }: { devices: any[] }) {
|
||
|
|
const getMachineNumber = useMachineNumber();
|
||
|
|
const deviceMap = new Map<number, any>();
|
||
|
|
|
||
|
|
devices.forEach((device) => {
|
||
|
|
const number = getMachineNumber(device.id || "");
|
||
|
|
if (number > 0 && number <= 40) deviceMap.set(number, device);
|
||
|
|
});
|
||
|
|
|
||
|
|
const computersPerRow = 8;
|
||
|
|
const totalRows = 5;
|
||
|
|
|
||
|
|
const renderRow = (rowIndex: number) => {
|
||
|
|
const start = rowIndex * computersPerRow + 1;
|
||
|
|
return (
|
||
|
|
<div key={rowIndex} className="flex items-center justify-center gap-3">
|
||
|
|
{Array.from({ length: 4 }).map((_, i) => {
|
||
|
|
const pos = start + i;
|
||
|
|
return <ComputerCard key={pos} device={deviceMap.get(pos)} position={pos} />;
|
||
|
|
})}
|
||
|
|
<div className="w-32 flex items-center justify-center">
|
||
|
|
<div className="h-px w-full bg-border border-t-2 border-dashed" />
|
||
|
|
</div>
|
||
|
|
{Array.from({ length: 4 }).map((_, i) => {
|
||
|
|
const pos = start + i + 4;
|
||
|
|
return <ComputerCard key={pos} device={deviceMap.get(pos)} position={pos} />;
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="px-0.5 py-8 space-y-6">
|
||
|
|
<div className="flex items-center justify-between px-4 pb-6 border-b-2 border-dashed">
|
||
|
|
<div className="flex items-center gap-3 px-6 py-4 bg-primary/10 rounded-lg border-2 border-primary/20">
|
||
|
|
<Monitor className="h-6 w-6 text-primary" />
|
||
|
|
<span className="font-semibold text-lg">Bàn Giảng Viên</span>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center gap-3 px-6 py-4 bg-muted rounded-lg border-2 border-border">
|
||
|
|
<DoorOpen className="h-6 w-6 text-muted-foreground" />
|
||
|
|
<span className="font-semibold text-lg">Cửa Ra Vào</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-4">
|
||
|
|
{Array.from({ length: totalRows }).map((_, i) => renderRow(i))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|