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

components/modals/InputModal.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function InputModal({ isOpen, input, closeModal }) {
+  if (!isOpen || !input) return null;
+
+  return (
+    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
+      <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
+        <h2 className="text-lg font-bold mb-4">
+          Details für Eingang {input.id}
+        </h2>
+        <p>
+          <strong>Status:</strong>{" "}
+          {input.status === "active" ? "Aktiv" : "Inaktiv"}
+        </p>
+        <p>
+          <strong>Beschreibung:</strong> {input.description}
+        </p>
+        <button
+          onClick={closeModal}
+          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
+        >
+          Schließen
+        </button>
+      </div>
+    </div>
+  );
+}

components/modals/OutputModal.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+export default function OutputModal({ isOpen, output, closeModal }) {
+  if (!isOpen || !output) return null;
+
+  return (
+    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
+      <div className="bg-white rounded-lg shadow-lg p-6 w-1/3">
+        <h2 className="text-lg font-bold mb-4">
+          Details für Ausgang {output.id}
+        </h2>
+        <p>
+          <strong>Bezeichnung:</strong> {output.description}
+        </p>
+        <p>
+          <strong>Status:</strong>{" "}
+          {output.toggle ? "Eingeschaltet" : "Ausgeschaltet"}
+        </p>
+        <button
+          onClick={closeModal}
+          className="mt-4 px-4 py-2 bg-blue-500 text-white rounded-lg"
+        >
+          Schließen
+        </button>
+      </div>
+    </div>
+  );
+}