// ** React Imports import { MouseEvent, useState } from 'react' // ** MUI Imports import Box from '@mui/material/Box' import Divider from '@mui/material/Divider' import { styled } from '@mui/material/styles' import ToggleButtonGroup from '@mui/material/ToggleButtonGroup' import MuiToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton' // ** Icon Imports import Icon from 'src/@core/components/icon' // Styled ToggleButton component const ToggleButton = styled(MuiToggleButton)(({ theme }) => ({ margin: theme.spacing(1), border: 'none !important', padding: theme.spacing(2), '&:not(:first-of-type)': { borderRadius: `${theme.shape.borderRadius}px !important` }, '&:first-of-type': { borderRadius: `${theme.shape.borderRadius}px !important` } })) const ButtonToggleCustomized = () => { // ** States const [alignment, setAlignment] = useState('left') const [formats, setFormats] = useState(() => ['italic']) const handleAlignment = (event: MouseEvent, newAlignment: string | null) => { setAlignment(newAlignment) } const handleFormat = (event: MouseEvent, newFormats: string[]) => { setFormats(newFormats) } return ( ) } export default ButtonToggleCustomized