Proyectos de Subversion LeadersLinked - SPA

import React, { useEffect, useState } from 'react';
import { styled } from '@mui/material';

const SwitchContainer = styled('label')`
  display: flex;
  flex-direction: column;
`;

const StyledSwitch = styled('div')(({ isChecked }) => ({
  position: 'relative',
  display: 'inline-block',
  width: '60px',
  height: '34px',
  '& input': {
    opacity: 0,
    width: 0,
    height: 0
  },
  '& .slider': {
    position: 'absolute',
    cursor: 'pointer',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: isChecked ? '#2196f3' : '#ccc',
    WebkitTransition: '0.4s',
    transition: '0.4s'
  },
  '& .slider:before': {
    position: 'absolute',
    content: '""',
    height: '26px',
    width: '26px',
    left: '4px',
    bottom: '4px',
    backgroundColor: 'white',
    WebkitTransition: '0.4s',
    transform: isChecked ? 'translateX(26px)' : 'translateX(0px)',
    transition: '0.4s'
  },
  '& input:focus + .slider': {
    boxShadow: '0 0 1px #2196f3'
  },
  '& .slider.round': {
    borderRadius: '34px'
  },
  '& .slider.round:before': {
    borderRadius: '50%'
  }
}));

const SwitchInput = ({ label = '', isChecked: initialValue = false, setValue = () => null }) => {
  const [isChecked, setIsChecked] = useState(false);

  const handleToggle = () => {
    setIsChecked(!isChecked);
    setValue(!isChecked);
  };

  useEffect(() => {
    setIsChecked(initialValue);
  }, [initialValue]);

  return (
    <SwitchContainer>
      {label}

      <StyledSwitch isChecked={isChecked}>
        <input type='checkbox' checked={isChecked} onChange={handleToggle} />
        <span className='slider round'></span>
      </StyledSwitch>
    </SwitchContainer>
  );
};

export default SwitchInput;