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