Switch

export default (props: IProps) => {

  const [f, setF] = useState<boolean>(false)

  const handleClick = () => {
    setF(!f)
    props.onChange(!f)
  }
  return (
    <div onClick={handleClick} className={styles.container}>
      <div 
        className={styles.slider}
        style={{
          backgroundColor: f ? 'red' : '#eee'
        }}
      />
      <div
        className={styles.dot}
        style={{
          left: f ? 53 : 3
        }}
      />
    </div>
  )
}

.container {
  height: 40px;
  width: 90px;
  cursor: pointer;
  position: relative;

  .slider {
    height: 100%;
    width: 100%;
    background-color: #eee;
    border-radius: 20px;
    transition: .3s;
  }

  .dot {
    width: 34px;
    border-radius: 50%;
    height: 34px;
    background-color: white;
    position: absolute;
    top: 3px;
    transition: .3s;
  }
}