Se crea un componente de un interruptor y sus estilos

/* The switch - the box around the slider */

.switch {

  position: relative;

  display: inline-block;

  width: 40px; /* 60px * 2/3 */

  height: 22.67px; /* 34px * 2/3 */

}

/* Hide default HTML checkbox */

.switch input {

  opacity: 0;

  width: 0;

  height: 0;

}

/* The slider */

.slider {

  position: absolute;

  cursor: pointer;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: #ccc;

  -webkit-transition: 0.4s;

  transition: 0.4s;

}

.slider:before {

  position: absolute;

  content: "";

  height: 17.33px; /* 26px * 2/3 */

  width: 17.33px; /* 26px * 2/3 */

  left: 2.67px; /* 4px * 2/3 */

  bottom: 2.67px; /* 4px * 2/3 */

  background-color: white;

  -webkit-transition: 0.4s;

  transition: 0.4s;

}

input:checked + .slider {

  background-color: #2196f3;

}

input:focus + .slider {

  box-shadow: 0 0 1px #2196f3;

}

input:checked + .slider:before {

  -webkit-transform: translateX(17.33px); /* 26px * 2/3 */

  -ms-transform: translateX(17.33px); /* 26px * 2/3 */

  transform: translateX(17.33px); /* 26px * 2/3 */

}

/* Rounded sliders */

.slider.round {

  border-radius: 22.67px; /* 34px * 2/3 */

}

.slider.round:before {

  border-radius: 50%;

}

import "./assets/css/styles.css";

interface Props {

  onClick?: () => void;

}

export const Swicth = ({ onClick }: Props) => {

  return (

    <label className="switch">

      <input type="checkbox" onClick={onClick} />

      <span className="slider round"></span>

    </label>

  );

};