Kue705-FO UI component

app/kabelueberwachung/page.jsx

@@ -1,86 +1,32 @@
 "use client";
 import React, { useState } from "react";
+import Kue705FO from "../../components/modules/Kue705FO";
 
 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" },
-  ];
+  const moduleValues = {
+    isolationswert: ">200",
+    schleifenwiderstand: "0.85",
+  };
 
   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 className="bg-gray-100 flex-1 p-4">
+      <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
+      <div className="flex flex-row gap-4">
+        {/* Hier verwenden wir die Kue705FO-Komponente */}
+        <Kue705FO
+          isolationswert={moduleValues.isolationswert}
+          schleifenwiderstand={moduleValues.schleifenwiderstand}
+        />
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
+        <Kue705FO
+          isolationswert={moduleValues.isolationswert}
+          schleifenwiderstand={moduleValues.schleifenwiderstand}
+        />
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
       </div>
     </div>
   );