40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import React from 'react'
|
|
|
|
import ToggleButton from '@mui/material/ToggleButton';
|
|
import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
|
|
import { ButtonGroupView } from './ButtonGroupView';
|
|
|
|
export default function ButtonGroup() {
|
|
const [timeCourse, setTimeCourse] = React.useState<string | null>('Mensal');
|
|
|
|
const handleAlignment = (
|
|
event: React.MouseEvent<HTMLElement>,
|
|
newTimeCourse: string | null,
|
|
) => {
|
|
setTimeCourse(newTimeCourse);
|
|
};
|
|
return (
|
|
<ButtonGroupView timeCourse={timeCourse} >
|
|
<ToggleButtonGroup
|
|
value={timeCourse}
|
|
exclusive
|
|
onChange={handleAlignment}
|
|
aria-label="time course"
|
|
className='groupButton'
|
|
style={{backgroundColor: 'transparent'}}
|
|
>
|
|
<div className='switch' />
|
|
<ToggleButton value="Mensal" aria-label="Mensal" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
|
|
Mensal
|
|
</ToggleButton>
|
|
<ToggleButton value="Semanal" aria-label="Semanal" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
|
|
Semanal
|
|
</ToggleButton>
|
|
<ToggleButton value="Hoje" aria-label="Hoje" style={{backgroundColor: 'transparent', minWidth: '90px', border: 'none'}}>
|
|
Hoje
|
|
</ToggleButton>
|
|
</ToggleButtonGroup>
|
|
</ButtonGroupView>
|
|
)
|
|
}
|