Struktur für components/main verbessert

components/main/modules/AnalogeEingaengeComponent.tsx

@@ -0,0 +1,79 @@
+"use client"; // components/modules/AnalogeEingaengeComponent.tsx
+import React, { useState } from "react";
+import { Icon } from "@iconify/react";
+import { analogInputs } from "../../../data/mockdata/analogInputs";
+
+const AnalogeEingaengeComponent = () => {
+  const [activeConfig, setActiveConfig] = useState<number | null>(null);
+
+  return (
+    <div className="border rounded-lg shadow-md laptop:p-4 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">
+            <tr>
+              <th className="px-2 py-1 whitespace-nowrap">Eingang</th>
+              <th className="px-2 py-1 whitespace-nowrap">Wert</th>
+              <th className="px-2 py-1 whitespace-nowrap">Bezeichnung</th>
+              <th className="px-2 py-1 text-center whitespace-nowrap">uW</th>
+              <th className="px-2 py-1 text-center whitespace-nowrap">uG</th>
+              <th className="px-2 py-1 text-center whitespace-nowrap">oW</th>
+              <th className="px-2 py-1 text-center whitespace-nowrap">oG</th>
+              <th className="px-2 py-1 text-center whitespace-nowrap">
+                Aktion
+              </th>
+            </tr>
+          </thead>
+          <tbody className="text-xs text-gray-600">
+            {analogInputs.map((input) => (
+              <tr key={input.id} className="border-t ">
+                <td className="px-2 py-1">{input.id}</td>
+                <td className="px-2 py-1">{input.value}</td>
+                <td className="px-2 py-1">{input.name}</td>
+                <td className="px-2 py-1 text-center">
+                  <span
+                    className={input.uW ? "text-green-500" : "text-gray-400"}
+                  >
+                    ●
+                  </span>
+                </td>
+                <td className="px-2 py-1 text-center">
+                  <span
+                    className={input.uG ? "text-green-500" : "text-gray-400"}
+                  >
+                    ●
+                  </span>
+                </td>
+                <td className="px-2 py-1 text-center">
+                  <span
+                    className={input.oW ? "text-orange-500" : "text-gray-400"}
+                  >
+                    ●
+                  </span>
+                </td>
+                <td className="px-2 py-1 text-center">
+                  <span
+                    className={input.oG ? "text-green-500" : "text-gray-400"}
+                  >
+                    ●
+                  </span>
+                </td>
+                <td className="px-2 py-1 text-center">
+                  <button
+                    onClick={() => setActiveConfig(input.id)}
+                    className="text-blue-500 hover:text-blue-700"
+                  >
+                    <Icon icon="mdi:cog-outline" />
+                  </button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+};
+
+export default AnalogeEingaengeComponent;