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

pages/einausgaenge.tsx

@@ -1,6 +1,7 @@
 "use client"; // Falls notwendig
 import React, { useState, useEffect } from "react";
 import { Icon } from "@iconify/react";
+import DigitalOutputs from "../components/main/einausgaenge/DigitalOutputs";
 
 function EinAusgaenge() {
   const [mockData, setMockData] = useState({
@@ -166,57 +167,11 @@ function EinAusgaenge() {
         </div>
 
         {/* Digitale Ausgänge */}
-        <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-2/5 h-[fit-content]">
-          <h2 className="text-md font-bold mb-4 flex items-center">
-            <Icon icon="mdi:output" className="text-blue-500 mr-2 text-2xl" />
-            Digitale Ausgä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">Ausgang</th>
-                <th className="px-2 py-1 text-left">Bezeichnung</th>
-                <th className="px-2 py-1 text-left">Schalter</th>
-                <th className="px-2 py-1 text-left">Aktion</th>
-              </tr>
-            </thead>
-            <tbody>
-              {digitalOutputs.map((output) => (
-                <tr key={output.id} className="border-b">
-                  <td className="flex items-center px-2 py-1">
-                    <Icon
-                      icon="mdi:output"
-                      className="text-black-500 mr-2 text-xl"
-                    />
-                    {output.id}
-                  </td>
-                  <td className="px-2 py-1">{output.description}</td>
-                  <td className="px-2 py-1">
-                    <Icon
-                      icon="ion:switch"
-                      onClick={() => toggleSwitch(output.id)}
-                      className={`cursor-pointer text-2xl transform ${
-                        output.toggle
-                          ? "text-blue-500 scale-x-100"
-                          : "text-gray-500 scale-x-[-1]"
-                      }`}
-                      title={`Schalter ${
-                        output.toggle ? "EIN" : "AUS"
-                      } schalten`}
-                    />
-                  </td>
-                  <td className="px-2 py-1">
-                    <Icon
-                      icon="mdi:settings"
-                      className="text-gray-400 text-lg cursor-pointer"
-                      onClick={() => openOutputModal(output)}
-                    />
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
+        <DigitalOutputs
+          digitalOutputs={digitalOutputs}
+          openOutputModal={openOutputModal}
+          toggleSwitch={toggleSwitch}
+        />
       </div>
 
       {/* Modal für Eingänge */}