switch icon spielgln und farbe ändern beim klick

pages/einausgaenge.js

@@ -1,5 +1,5 @@
 "use client"; // Falls notwendig
-import React from "react";
+import React, { useState } from "react";
 import { Icon } from "@iconify/react";
 
 function EinAusgaenge() {
@@ -38,17 +38,23 @@ function EinAusgaenge() {
     { id: 32, status: "inactive", description: "DE32", isInverted: false },
   ];
 
-  const digitalOutputs = [
+  // Aufteilen der Eingänge in zwei Gruppen
+  const inputsGroup1 = digitalInputs.slice(0, 16);
+  const inputsGroup2 = digitalInputs.slice(16);
+  //-----------------------------------------
+  const [digitalOutputs, setDigitalOutputs] = useState([
     { id: 1, description: "Ausgang1", toggle: true },
     { id: 2, description: "Ausgang2", toggle: false },
     { id: 3, description: "Ausgang3", toggle: true },
     { id: 4, description: "Ausgang4", toggle: false },
-    // Weitere Einträge
-  ];
-
-  // Aufteilen der Eingänge in zwei Gruppen
-  const inputsGroup1 = digitalInputs.slice(0, 16);
-  const inputsGroup2 = digitalInputs.slice(16);
+  ]);
+  const toggleSwitch = (id) => {
+    setDigitalOutputs((prevOutputs) =>
+      prevOutputs.map((output) =>
+        output.id === id ? { ...output, toggle: !output.toggle } : output
+      )
+    );
+  };
 
   return (
     <div className="p-4">
@@ -150,9 +156,15 @@ function EinAusgaenge() {
                   <td className="px-2 py-1">
                     <Icon
                       icon="ion:switch"
-                      className={`text-2xl ${
-                        output.toggle ? "text-blue-500" : "text-gray-500"
+                      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">