Xio-PM mit Mock Daten

components/modules/AnalogeEingaengeComponent.tsx

@@ -44,10 +44,8 @@ const AnalogeEingaengeComponent = () => {
   ];
 
   return (
-    <div className="border rounded-lg shadow-md p-4 bg-white flex flex-col h-full">
-      <h3 className="text-lg font-semibold mb-4 flex-shrink-0">
-        Analoge Eingänge
-      </h3>
+    <div className="border rounded-lg shadow-md p-6 bg-white flex flex-col h-full">
+      <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
       <div className="overflow-auto flex-grow">
         <table className="table-auto w-full h-full text-sm text-left border-collapse">
           <thead className="bg-gray-100 text-gray-700">

components/modules/XioPM.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import { Icon } from "@iconify/react";
+
+interface InputData {
+  id: number;
+  value: number;
+  name: string;
+  uW: boolean;
+  uG: boolean;
+  oW: boolean;
+  oG: boolean;
+}
+
+interface XioPmProps {
+  title: string;
+  data: InputData[];
+  onConfigClick: (id: number) => void;
+}
+
+const XioPM: React.FC<XioPmProps> = ({ title, data, onConfigClick }) => (
+  <div className="border rounded-lg shadow-md p-6 bg-white">
+    <h3 className="text-sm font-semibold mb-1">{title}</h3>
+    <table className="w-full h-full text-xs text-left">
+      <thead className="bg-gray-100 text-gray-700">
+        <tr>
+          <th className="px-1 py-1">Eingang</th>
+          <th className="px-1 py-1">Wert</th>
+          <th className="px-1 py-1">Bezeichnung</th>
+          <th className="px-1 py-1 text-center">uW</th>
+          <th className="px-1 py-1 text-center">uG</th>
+          <th className="px-1 py-1 text-center">oW</th>
+          <th className="px-1 py-1 text-center">oG</th>
+          <th className="px-1 py-1 text-center">Aktion</th>
+        </tr>
+      </thead>
+      <tbody>
+        {data.map((input) => (
+          <tr key={input.id} className="border-t">
+            <td className="px-1 py-1">{input.id}</td>
+            <td className="px-1 py-1">{input.value.toFixed(2)}</td>
+            <td className="px-1 py-1">{input.name}</td>
+            <td className="px-1 py-1 text-center">
+              <span className={input.uW ? "text-green-500" : "text-gray-400"}>
+                ●
+              </span>
+            </td>
+            <td className="px-1 py-1 text-center">
+              <span className={input.uG ? "text-green-500" : "text-gray-400"}>
+                ●
+              </span>
+            </td>
+            <td className="px-1 py-1 text-center">
+              <span className={input.oW ? "text-orange-500" : "text-gray-400"}>
+                ●
+              </span>
+            </td>
+            <td className="px-1 py-1 text-center">
+              <span className={input.oG ? "text-green-500" : "text-gray-400"}>
+                ●
+              </span>
+            </td>
+            <td className="px-1 py-1 text-center">
+              <button
+                onClick={() => onConfigClick(input.id)}
+                className="text-blue-500 hover:text-blue-700"
+              >
+                <Icon icon="mdi:cog-outline" />
+              </button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+);
+
+export default XioPM;