language-web/src/main/js/App.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Box from '@material-ui/core/Box';
import Fab from '@material-ui/core/Fab';
import IconButton from '@material-ui/core/IconButton';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import MenuIcon from '@material-ui/icons/Menu';
import PlayArrowIcon from '@material-ui/icons/PlayArrow';

import Editor from './editor/Editor';
import EditorButtons from './editor/EditorButtons';

const useStyles = makeStyles(theme => ({
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
  fab: {
    position: 'fixed',
    right: theme.spacing(3),
    bottom: theme.spacing(3),
    zIndex: 1000,
  },
  extendedIcon: {
    marginRight: theme.spacing(1),
  }
}));

export default () => {
  const classes = useStyles();

  return (
    <>
      <AppBar
        position='static'
      >
        <Toolbar>
          <IconButton
            edge='start'
            className={classes.menuButton}
            color='inherit'
            aria-label='menu'
          >
            <MenuIcon />
          </IconButton>
          <Typography
            variant='h6'
            component='h1'
            className={classes.title}
          >
            GraphSolver
          </Typography>
        </Toolbar>
      </AppBar>
      <Box>
        <EditorButtons/>
      </Box>
      <Editor/>
      <Fab
        variant='extended'
        color='secondary'
        className={classes.fab}
      >
        <PlayArrowIcon className={classes.extendedIcon}/>
        Generate
      </Fab>
    </>
  );
};