pawol.nu/components/soutyen/payment-method.js

import {useEffect, useMemo} from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import {styled} from '@mui/system'
import {useSwitch} from '@mui/base/SwitchUnstyled'

const green = {
  700: '#4CAF50',
}

const grey = {
  400: '#BFC7CF',
  800: '#2F3A45',
}

const SwitchRoot = styled('span')`
  display: inline-block;
  position: relative;
  width: 84px;
  height: 36px;
  padding: 8px;
`

const SwitchInput = styled('input')`
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  margin: 0;
  cursor: pointer;
`

const SwitchThumb = styled('span')`
  position: absolute;
  display: block;
  background-color: ${green[700]};
  width: 40px;
  height: 40px;
  border-radius: 8px;
  top: -1px;
  left: 4px;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);

  &::before {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
    '#fff',
  )}" d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/></svg>')
      center center no-repeat;
  }

  &.focusVisible {
    background-color: #79b;
  }

  &.checked {
    transform: translateX(44px);

    &::before {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="25" width="25" viewBox="0 0 24 24"><path fill="${encodeURIComponent(
    '#fff',
  )}" d="M7.076 21.337H2.47a.641.641 0 0 1-.633-.74L4.944.901C5.026.382 5.474 0 5.998 0h7.46c2.57 0 4.578.543 5.69 1.81 1.01 1.15 1.304 2.42 1.012 4.287-.023.143-.047.288-.077.437-.983 5.05-4.349 6.797-8.647 6.797h-2.19c-.524 0-.968.382-1.05.9l-1.12 7.106zm14.146-14.42a3.35 3.35 0 0 0-.607-.541c-.013.076-.026.175-.041.254-.93 4.778-4.005 7.201-9.138 7.201h-2.19a.563.563 0 0 0-.556.479l-1.187 7.527h-.506l-.24 1.516a.56.56 0 0 0 .554.647h3.882c.46 0 .85-.334.922-.788.06-.26.76-4.852.816-5.09a.932.932 0 0 1 .923-.788h.58c3.76 0 6.705-1.528 7.565-5.946.36-1.847.174-3.388-.777-4.471z"/></svg>');
    }
  }
`

const SwitchTrack = styled('span')(
  ({theme}) => `
  background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[400]};
  border-radius: 4px;
  width: 100%;
  height: 100%;
  display: block;
`,
)

function MUISwitch(props) {
  const {setIsPaypal} = props
  const {getInputProps, checked, disabled, focusVisible} = useSwitch(props)

  const stateClasses = useMemo(() => ({
    checked,
    disabled,
    focusVisible,
  }), [checked, disabled, focusVisible])

  useEffect(() => {
    setIsPaypal(stateClasses.checked)
  }, [setIsPaypal, stateClasses])

  return (
    <SwitchRoot className={clsx(stateClasses)}>
      <SwitchTrack>
        <SwitchThumb className={clsx(stateClasses)} />
      </SwitchTrack>
      <SwitchInput {...getInputProps()} aria-label='Demo switch' />
    </SwitchRoot>
  )
}

MUISwitch.propTypes = {
  setIsPaypal: PropTypes.func.isRequired
}

export default function PaymentMethod({setIsPaypal}) {
  return <MUISwitch defaultChecked setIsPaypal={setIsPaypal} />
}

PaymentMethod.propTypes = {
  setIsPaypal: PropTypes.func.isRequired
}