Cleaning up

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/switch/switch.module.scss

@@ -29,6 +29,11 @@
   --track-color-inactive: hsl(80 0% 35%);
   --track-color-active: hsl(110, 60%, 60%);
 
+  --thumb-position: 0%;
+  --thumb-transition-duration: .25s;
+
+  --hover-highlight-size: 0;
+
   display: flex;
   align-items: center;
   gap: 2ch;
@@ -39,9 +44,6 @@
   font-weight: 500;
 
   & > input {
-    --thumb-position: 0%;
-    --thumb-transition-duration: .25s;
-
     padding: var(--track-padding);
     background: var(--track-color-inactive);
     inline-size: var(--track-size);
@@ -62,8 +64,6 @@
     transition: background-color .25s ease;
 
     &::before {
-      --highlight-size: 0;
-
       content: "";
       cursor: pointer;
       pointer-events: auto;
@@ -71,7 +71,7 @@
       inline-size: var(--thumb-size);
       block-size: var(--thumb-size);
       background: var(--thumb-color);
-      box-shadow: 0 0 0 var(--highlight-size) var(--thumb-color-highlight);
+      box-shadow: 0 0 0 var(--hover-highlight-size) var(--thumb-color-highlight);
       border-radius: 50%;
       transform: translateX(var(--thumb-position));
       transition:
@@ -80,7 +80,7 @@
     }
 
     &:not(:disabled):hover::before {
-      --highlight-size: .5rem;
+      --hover-highlight-size: .5rem;
     }
 
     &:checked {

src/renderer/components/switch/switch.tsx

@@ -21,33 +21,18 @@
 
 import styles from "./switch.module.scss";
 
-import React, { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import React from "react";
 import { cssNames } from "../../utils";
 
-interface Props extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-  onClick?: () => void;
+interface Props extends React.HTMLProps<HTMLInputElement> {
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export function Switch({ children, onClick, ...settings }: Props) {
-  const id = `switch-${Date.now()}`;
-
-  const onLabelClick = () => {
-    if (settings.disabled || !onClick) {
-      return;
-    }
-
-    onClick();
-  };
-
+export function Switch({ children, disabled, ...props }: Props) {
   return (
-    <label
-      htmlFor={id}
-      className={cssNames(styles.Switch, { [styles.disabled]: settings.disabled })}
-      onClick={onLabelClick}
-      data-testid="switch"
-    >
+    <label className={cssNames(styles.Switch, { [styles.disabled]: disabled })} data-testid="switch">
       {children}
-      <input type="checkbox" role="switch" id={id} {...settings}/>
+      <input type="checkbox" role="switch" disabled={disabled} {...props}/>
     </label>
   );
 }