35 lines
1.1 KiB
JavaScript
35 lines
1.1 KiB
JavaScript
// components/Kue705_FO.jsx
|
|
import React from "react";
|
|
|
|
const Kue705_FO = ({ slot, kueCableBreak, isOnline }) => {
|
|
if (!isOnline) {
|
|
return (
|
|
<div className="border border-gray-400 w-10 h-20 flex items-center justify-center bg-gray-200">
|
|
<div className="text-xs text-gray-500">Leer</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const isCableBreak = kueCableBreak[slot - 1] === 1;
|
|
|
|
return (
|
|
<div className="border border-gray-400 w-10 h-20 flex flex-col">
|
|
{/* Erstes Kind, nimmt den restlichen Platz ein */}
|
|
<div className="bg-blue-500 flex-grow flex flex-col items-center justify-center text-white text-[10px]">
|
|
<div className="flex w-full mb-1 items-start justify-start">{slot}</div>
|
|
<div className="text-[10px]">KÜ705</div>
|
|
<div className="text-[10px]">FO</div>
|
|
</div>
|
|
{/* Die unteren Abschnitte behalten ihre festen Höhen */}
|
|
<div
|
|
className={`w-full h-2/6 ${
|
|
isCableBreak ? "bg-red-500" : "bg-green-500"
|
|
}`}
|
|
></div>
|
|
<div className="bg-blue-500 w-full h-1/6"></div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Kue705_FO;
|