import { observer } from 'mobx-react-lite';
import React from 'react';
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import ToggleButton from '@material-ui/core/ToggleButton';
import Divider from '@material-ui/core/Divider';
import FormatListNumberedIcon from '@material-ui/icons/FormatListNumbered';
import RedoIcon from '@material-ui/icons/Redo';
import UndoIcon from '@material-ui/icons/Undo';
import { makeStyles } from '../makeStyles';
import { useRootStore } from '../RootStore';
const useStyles = makeStyles()(theme => ({
iconButton: {
padding: 7,
border: 0,
color: theme.palette.text.primary,
'&, &.MuiButtonGroup-grouped': {
minWidth: 36,
},
'&.MuiButtonGroup-grouped:not(:last-of-type)': {
borderRight: 0,
},
},
divider: {
margin: theme.spacing(0.5),
},
}));
export default observer(() => {
const editorStore = useRootStore().editorStore;
const { classes, cx } = useStyles();
return (
<>
editorStore.toggleLineNumbers()}
size='small'
className={cx(classes.iconButton)}
aria-label='Show line numbers'
value='show-line-numbers'
>
>
);
});