style: Digitale Ausgänge Switch

components/main/digitalOutputs/DigitalOutputsWidget.tsx

@@ -108,15 +108,17 @@ export default function DigitalOutputsWidget({
                 {output.label}
               </td>
               <td className="px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
-                <Icon
-                  icon={switchIcon}
-                  className={`cursor-pointer text-base transition ${
-                    output.status
-                      ? "text-accent"
-                      : "text-[var(--color-muted)] scale-x-[-1]"
-                  } hover:text-accent`}
+                <button
+                  type="button"
+                  role="switch"
+                  aria-checked={output.status}
                   onClick={() => handleToggle(output.id)}
-                />
+                  className={`relative inline-flex h-4 w-7 items-center rounded-full border border-base transition-colors duration-200 ${output.status ? "bg-littwin-blue" : "bg-base-muted"}`}
+                >
+                  <span
+                    className={`absolute left-0.5 top-1/2 -translate-y-1/2 h-3 w-3 rounded-full bg-white shadow transition-transform duration-200 ${output.status ? "translate-x-3.5" : "translate-x-0"}`}
+                  />
+                </button>
               </td>
               <td className="px-1 py-1 bg-[var(--color-surface)] text-[var(--color-fg)]">
                 <Icon