import { Theme } from '@mui/material'; import React, { useCallback } from 'react'; import { makeStyles } from 'tss-react/mui'; import { isMobileBrowser } from '../../../environment/utils'; import { SwitchProps } from '../types'; interface Props extends SwitchProps { /** * Id of the toggle. */ id?: string; } const useStyles = makeStyles()((theme: Theme) => { return { container: { position: 'relative', backgroundColor: theme.palette.ui05, borderRadius: '12px', width: '40px', height: '24px', border: 0, outline: 0, cursor: 'pointer', transition: '.3s', display: 'inline-block', '&.disabled': { backgroundColor: theme.palette.ui05, cursor: 'default', '& .toggle': { backgroundColor: theme.palette.ui03 } }, '&.is-mobile': { height: '32px', width: '50px', borderRadius: '32px' } }, containerOn: { backgroundColor: theme.palette.action01 }, toggle: { width: '16px', height: '16px', position: 'absolute', top: '4px', left: '4px', backgroundColor: theme.palette.ui10, borderRadius: '100%', transition: '.3s', '&.is-mobile': { width: '24px', height: '24px' } }, toggleOn: { left: '20px', '&.is-mobile': { left: '22px' } }, checkbox: { height: 0, width: 0 } }; }); const Switch = ({ id, checked, disabled, onChange }: Props) => { const { classes: styles, cx } = useStyles(); const isMobile = isMobileBrowser(); const change = useCallback((e: React.ChangeEvent) => { onChange(e.target.checked); }, []); return (