Digitale Ausgänge ausgelagert von Ein- und Asgänge

components/main/einausgaenge/DigitalInputs.tsx

@@ -0,0 +1,46 @@
+// components/main/einausgaenge/DigitalInputs.tsx
+import React from "react";
+import { Icon } from "@iconify/react";
+
+export default function DigitalInputs({ digitalInputs, openInputModal }) {
+  return (
+    <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-3/5 flex-grow flex flex-col">
+      <h2 className="text-md font-bold mb-4 flex items-center">
+        <Icon icon="mdi:input" className="text-blue-500 mr-2 text-2xl" />
+        Digitale Eingänge
+      </h2>
+      <table className="w-full text-sm border-collapse bg-white rounded-lg">
+        <thead className="bg-gray-100 border-b">
+          <tr>
+            <th className="px-2 py-1 text-left">Eingang</th>
+            <th className="px-2 py-1 text-left">Zustand</th>
+            <th className="px-2 py-1 text-left">Bezeichnung</th>
+            <th className="px-2 py-1 text-left">Aktion</th>
+          </tr>
+        </thead>
+        <tbody>
+          {digitalInputs.map((input) => (
+            <tr key={input.id} className="border-b">
+              <td className="flex items-center p-2">
+                <Icon
+                  icon="mdi:input"
+                  className="text-black-500 mr-2 text-xl"
+                />
+                {input.id}
+              </td>
+              <td className="p-2">{input.status === "active" ? "●" : "⨉"}</td>
+              <td className="p-2">{input.description}</td>
+              <td className="p-2">
+                <Icon
+                  icon="mdi:settings"
+                  className="text-gray-400 text-lg cursor-pointer"
+                  onClick={() => openInputModal(input)}
+                />
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}