blob: 8bad56f3a62fb3248165626d7c797e3ac6ea8916 (
plain)
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
|
// Main layout for home page.
import { useEffect } from 'react'
import { Link as RouterLink } from 'react-router-dom'
import Button from '@material-ui/core/Button'
import Container from '@material-ui/core/Container'
import { makeStyles } from '@material-ui/core/styles'
import Typography from '@material-ui/core/Typography'
import logo from '../static/logo.png'
const useStyles = makeStyles((theme) => ({
header: {
padding: theme.spacing(23, 0, 6)
}
}))
export default function Home () {
const classes = useStyles()
useEffect(() => {
document.title = process.env.REACT_APP_NAME
}, [])
const typography1 = process.env.REACT_APP_NAME + ' on Cloud'
const typography2 = 'Online ' + process.env.REACT_APP_NAME + ' Simulator'
const typography3 = process.env.REACT_APP_DIAGRAM_NAME + ' Editor'
return (
<Container maxWidth='sm' component='main' className={classes.header}>
<center>
<img src={logo} width='120' height='120' alt='Logo' />
</center>
<Typography
component='h1'
variant='h2'
align='center'
color='textPrimary'
gutterBottom
>
{typography1}
</Typography>
<Typography
variant='h5'
align='center'
color='textSecondary'
component='p'
>
{typography2}
<br />
<br />
<Button
component={RouterLink}
to='/editor'
variant='contained'
size='large'
color='primary'
>
{typography3}
</Button>
</Typography>
</Container>
)
}
|
