Namen angepasst

components/main/einausgaenge/modals/InputModal.tsx

@@ -3,6 +3,7 @@
 import React, { useEffect, useState } from "react";
 import { useSelector, useDispatch } from "react-redux";
 import { RootState } from "../../../../redux/store";
+import switchIcon from "@iconify/icons-ion/switch";
 import {
   updateInvertierung,
   updateName,
@@ -178,20 +179,31 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
           <div>
             <strong>Invertierung:</strong>
           </div>
-          <div className="flex justify-between items-center gap-2">
+          <div className="flex items-center gap-2">
             <span>{invertiert ? "Ein" : "Aus"}</span>
             <button
+              type="button"
+              role="switch"
+              aria-checked={invertiert}
               onClick={() => setInvertiert(!invertiert)}
-              className="px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded"
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
+                invertiert ? "bg-green-500" : "bg-gray-300"
+              }`}
             >
-              Umschalten
+              <span
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
+                  invertiert ? "translate-x-6" : "translate-x-1"
+                }`}
+              />
             </button>
           </div>
-
+          {/* Zählerstand ausblenden */}
+          {/*
           <div>
             <strong>Zählerstand:</strong>
           </div>
           <div>{reduxInput.counter}</div>
+          */}
 
           <div>
             <strong>Filterzeit:</strong>
@@ -235,20 +247,33 @@ export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
               title="Maximal 1000 erlaubt"
             />
           </div>
-
-          <div>
+          {/* Zähler aktiv ausblenden */}
+          {/* 
+          
+                    <div>
             <strong>Zähler aktiv:</strong>
           </div>
           <div className="flex items-center gap-2">
             <span>{zaehlerAktiv ? "Ja" : "Nein"}</span>
             <button
+              type="button"
+              role="switch"
+              aria-checked={zaehlerAktiv}
               onClick={() => setZaehlerAktiv(!zaehlerAktiv)}
-              className="ml-auto px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded"
+              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
+                zaehlerAktiv ? "bg-green-500" : "bg-gray-300"
+              }`}
             >
-              Umschalten
+              <span
+                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
+                  zaehlerAktiv ? "translate-x-6" : "translate-x-1"
+                }`}
+              />
             </button>
           </div>
 
+          */}
+
           <div className="relative group inline-block">
             <strong>OOS:</strong>
             <span className="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs text-white bg-gray-700 rounded opacity-0 group-hover:opacity-100 transition-opacity">