diff options
Diffstat (limited to 'language-web/src/main/js/App.tsx')
-rw-r--r-- | language-web/src/main/js/App.tsx | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/language-web/src/main/js/App.tsx b/language-web/src/main/js/App.tsx new file mode 100644 index 00000000..5bd46c09 --- /dev/null +++ b/language-web/src/main/js/App.tsx | |||
@@ -0,0 +1,92 @@ | |||
1 | import React from 'react'; | ||
2 | import AppBar from '@material-ui/core/AppBar'; | ||
3 | import Box from '@material-ui/core/Box'; | ||
4 | import Button from '@material-ui/core/Button'; | ||
5 | import IconButton from '@material-ui/core/IconButton'; | ||
6 | import Toolbar from '@material-ui/core/Toolbar'; | ||
7 | import Typography from '@material-ui/core/Typography'; | ||
8 | import MenuIcon from '@material-ui/icons/Menu'; | ||
9 | import PlayArrowIcon from '@material-ui/icons/PlayArrow'; | ||
10 | |||
11 | import { makeStyles } from './makeStyles'; | ||
12 | import Editor from './editor/Editor'; | ||
13 | import EditorButtons from './editor/EditorButtons'; | ||
14 | |||
15 | const useStyles = makeStyles()(theme => ({ | ||
16 | container: { | ||
17 | maxHeight: '100vh', | ||
18 | }, | ||
19 | menuButton: { | ||
20 | marginRight: theme.spacing(2), | ||
21 | }, | ||
22 | title: { | ||
23 | flexGrow: 1, | ||
24 | }, | ||
25 | editorBox: { | ||
26 | overflow: 'auto', | ||
27 | }, | ||
28 | })); | ||
29 | |||
30 | export default () => { | ||
31 | const { classes, cx } = useStyles(); | ||
32 | |||
33 | return ( | ||
34 | <Box | ||
35 | display='flex' | ||
36 | flexDirection='column' | ||
37 | className={cx(classes.container)} | ||
38 | > | ||
39 | <AppBar | ||
40 | position='static' | ||
41 | color='inherit' | ||
42 | > | ||
43 | <Toolbar> | ||
44 | <IconButton | ||
45 | edge='start' | ||
46 | className={cx(classes.menuButton)} | ||
47 | color='inherit' | ||
48 | aria-label='menu' | ||
49 | > | ||
50 | <MenuIcon /> | ||
51 | </IconButton> | ||
52 | <Typography | ||
53 | variant='h6' | ||
54 | component='h1' | ||
55 | className={cx(classes.title)} | ||
56 | > | ||
57 | GraphSolver | ||
58 | </Typography> | ||
59 | </Toolbar> | ||
60 | </AppBar> | ||
61 | <Box | ||
62 | display='flex' | ||
63 | justifyContent='space-between' | ||
64 | alignItems='center' | ||
65 | p={1} | ||
66 | > | ||
67 | <Box | ||
68 | display='flex' | ||
69 | alignItems='center' | ||
70 | > | ||
71 | <EditorButtons/> | ||
72 | </Box> | ||
73 | <Box> | ||
74 | <Button | ||
75 | variant='outlined' | ||
76 | color='primary' | ||
77 | startIcon={<PlayArrowIcon/>} | ||
78 | > | ||
79 | Generate | ||
80 | </Button> | ||
81 | </Box> | ||
82 | </Box> | ||
83 | <Box | ||
84 | flexGrow={1} | ||
85 | flexShrink={1} | ||
86 | className={cx(classes.editorBox)} | ||
87 | > | ||
88 | <Editor/> | ||
89 | </Box> | ||
90 | </Box> | ||
91 | ); | ||
92 | }; | ||