90 lines
3.2 KiB
JavaScript
90 lines
3.2 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
|
|
function Kabelueberwachung() {
|
|
const [activeTab, setActiveTab] = useState(1);
|
|
|
|
const racks = [
|
|
{ id: 1, name: "Rack 1" },
|
|
{ id: 2, name: "Rack 2" },
|
|
{ id: 3, name: "Rack 3" },
|
|
{ id: 4, name: "Rack 4" },
|
|
];
|
|
|
|
return (
|
|
<div className="bg-gray-100 flex-1 p-4 overflow-hidden">
|
|
{/* Tabs */}
|
|
<ul className="flex border-b border-gray-200">
|
|
{racks.map((rack) => (
|
|
<li
|
|
key={rack.id}
|
|
className={`mr-1 ${
|
|
activeTab === rack.id ? "border-blue-500 text-blue-600" : ""
|
|
}`}
|
|
>
|
|
<button
|
|
onClick={() => setActiveTab(rack.id)}
|
|
className={`inline-block px-4 py-2 rounded-t-lg ${
|
|
activeTab === rack.id
|
|
? "bg-blue-500 text-white"
|
|
: "bg-white text-black hover:bg-gray-200"
|
|
}`}
|
|
>
|
|
{rack.name}
|
|
</button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
{/* Rack-Inhalte */}
|
|
<div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto max-h-full">
|
|
{racks.map(
|
|
(rack) =>
|
|
activeTab === rack.id && (
|
|
<div key={rack.id}>
|
|
<h2 className="text-lg font-bold mb-4">{rack.name} Inhalte</h2>
|
|
<table className="min-w-full bg-white border border-gray-300">
|
|
<thead>
|
|
<tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
|
|
<th className="py-3 px-4 text-left">Slot</th>
|
|
<th className="py-3 px-4 text-left">Bezeichnung</th>
|
|
<th className="py-3 px-4 text-center">
|
|
Isolationsgrenzwert
|
|
</th>
|
|
<th className="py-3 px-4 text-center">
|
|
Schleifengrenzwert
|
|
</th>
|
|
<th className="py-3 px-4 text-center">Filterzeit</th>
|
|
<th className="py-3 px-4 text-center">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-gray-600 text-sm">
|
|
{Array.from({ length: 8 }, (_, index) => (
|
|
<tr key={index} className="border-b border-gray-200">
|
|
<td className="py-3 px-4 text-left">
|
|
Slot {index + 1}
|
|
</td>
|
|
<td className="py-3 px-4 text-left">
|
|
Beispielbezeichnung
|
|
</td>
|
|
<td className="py-3 px-4 text-center">0.5 MOhm</td>
|
|
<td className="py-3 px-4 text-center">10 kOhm</td>
|
|
<td className="py-3 px-4 text-center">5 sek.</td>
|
|
<td className="py-3 px-4 text-center">
|
|
<button className="bg-blue-500 text-white px-3 py-1 rounded">
|
|
Bearbeiten
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Kabelueberwachung;
|