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 moduleValues = {
-
+    isolationswert: ">200",
-  const racks = [
+    schleifenwiderstand: "0.85",
-    { 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">
+    <div className="bg-gray-100 flex-1 p-4">
-      {/* Tabs */}
+      <h1 className="text-2xl mb-4">Kabelüberwachung</h1>
-      <ul className="flex border-b border-gray-200">
+      <div className="flex flex-row gap-4">
-        {racks.map((rack) => (
+        {/* Hier verwenden wir die Kue705FO-Komponente */}
-          <li
+        <Kue705FO
-            key={rack.id}
+          isolationswert={moduleValues.isolationswert}
-            className={`mr-1 ${
+          schleifenwiderstand={moduleValues.schleifenwiderstand}
-              activeTab === rack.id ? "border-blue-500 text-blue-600" : ""
+        />
-            }`}
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-          >
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-            <button
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-              onClick={() => setActiveTab(rack.id)}
+        <Kue705FO
-              className={`inline-block px-4 py-2 rounded-t-lg ${
+          isolationswert={moduleValues.isolationswert}
-                activeTab === rack.id
+          schleifenwiderstand={moduleValues.schleifenwiderstand}
-                  ? "bg-blue-500 text-white"
+        />
-                  : "bg-white text-black hover:bg-gray-200"
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-              }`}
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-            >
+        <Kue705FO isolationswert="150" schleifenwiderstand="1.00" />
-              {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>
   );

components/modules/Kue705FO.jsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Icon } from "@iconify/react"; // Für Iconify Icons
+
+function Kue705FO({ isolationswert, schleifenwiderstand, modulName, version }) {
+  return (
+    <div className="relative bg-gray-300 w-[116px] h-[390px] border border-gray-400">
+      {/* Hauptkörper - Linker Bereich */}
+      <div className="absolute top-[1.352px] left-[1.352px] w-[113.202px] h-[242.492px] bg-littwin-blue border-[1.5px] border-gray-400"></div>
+
+      {/* Innenrahmen weiß */}
+      <div className="absolute top-[3.375px] left-[3.375px] w-[109.125px] h-[238.5px] border-[3px] border-white"></div>
+
+      {/* Rechte Spalte */}
+      <div className="absolute top-[3.375px] right-0 w-[37.5px] h-[238.5px] border-[3px] border-white"></div>
+
+      {/* Oberer kleiner Block in der rechten Spalte */}
+      <div className="absolute top-[3.375px] right-0 w-[37.5px] h-[37.052px] border-[3px] border-white"></div>
+
+      {/* Text KÜ705-FO */}
+      <h3 className="absolute top-[19.871px] left-[25.541px] text-white font-bold text-[9px]">
+        KÜ705-FO
+      </h3>
+
+      {/* Unterer Bereich - Schleifenwiderstand und Messkurve */}
+      <div className="absolute bottom-0 left-[1.095px] w-[113.182px] h-[105.864px] bg-gray-300 border-[1.5px] border-gray-400">
+        {/* Messkurve Button */}
+        <div className="absolute bottom-[1.5px] left-[13.49px] w-[91.428px] h-[14.544px] bg-littwin-blue flex items-center justify-center">
+          <span className="text-white text-[9px]">Messkurve</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Kue705FO;

tailwind.config.js

@@ -6,7 +6,11 @@ module.exports = {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        "littwin-blue": "#00AEEF", // Definiere die Farbe mit dem gewünschten Hex-Wert
+      },
+    },
   },
   plugins: [],
 };