diff options
Diffstat (limited to 'language-web/src/main/js/App.jsx')
-rw-r--r-- | language-web/src/main/js/App.jsx | 73 |
1 files changed, 73 insertions, 0 deletions
diff --git a/language-web/src/main/js/App.jsx b/language-web/src/main/js/App.jsx new file mode 100644 index 00000000..61ded943 --- /dev/null +++ b/language-web/src/main/js/App.jsx | |||
@@ -0,0 +1,73 @@ | |||
1 | import React from 'react'; | ||
2 | import { makeStyles } from '@material-ui/core/styles'; | ||
3 | import AppBar from '@material-ui/core/AppBar'; | ||
4 | import Box from '@material-ui/core/Box'; | ||
5 | import Fab from '@material-ui/core/Fab'; | ||
6 | import IconButton from '@material-ui/core/IconButton'; | ||
7 | import Toolbar from '@material-ui/core/Toolbar'; | ||
8 | import Typography from '@material-ui/core/Typography'; | ||
9 | import MenuIcon from '@material-ui/icons/Menu'; | ||
10 | import PlayArrowIcon from '@material-ui/icons/PlayArrow'; | ||
11 | |||
12 | import Editor from './editor/Editor'; | ||
13 | import EditorButtons from './editor/EditorButtons'; | ||
14 | |||
15 | const useStyles = makeStyles(theme => ({ | ||
16 | menuButton: { | ||
17 | marginRight: theme.spacing(2), | ||
18 | }, | ||
19 | title: { | ||
20 | flexGrow: 1, | ||
21 | }, | ||
22 | fab: { | ||
23 | position: 'fixed', | ||
24 | right: theme.spacing(3), | ||
25 | bottom: theme.spacing(3), | ||
26 | zIndex: 1000, | ||
27 | }, | ||
28 | extendedIcon: { | ||
29 | marginRight: theme.spacing(1), | ||
30 | } | ||
31 | })); | ||
32 | |||
33 | export default () => { | ||
34 | const classes = useStyles(); | ||
35 | |||
36 | return ( | ||
37 | <> | ||
38 | <AppBar | ||
39 | position='static' | ||
40 | > | ||
41 | <Toolbar> | ||
42 | <IconButton | ||
43 | edge='start' | ||
44 | className={classes.menuButton} | ||
45 | color='inherit' | ||
46 | aria-label='menu' | ||
47 | > | ||
48 | <MenuIcon /> | ||
49 | </IconButton> | ||
50 | <Typography | ||
51 | variant='h6' | ||
52 | component='h1' | ||
53 | className={classes.title} | ||
54 | > | ||
55 | GraphSolver | ||
56 | </Typography> | ||
57 | </Toolbar> | ||
58 | </AppBar> | ||
59 | <Box> | ||
60 | <EditorButtons/> | ||
61 | </Box> | ||
62 | <Editor/> | ||
63 | <Fab | ||
64 | variant='extended' | ||
65 | color='secondary' | ||
66 | className={classes.fab} | ||
67 | > | ||
68 | <PlayArrowIcon className={classes.extendedIcon}/> | ||
69 | Generate | ||
70 | </Fab> | ||
71 | </> | ||
72 | ); | ||
73 | }; | ||