blob: 52f7c4edc5825ac67c34f0364f655ff763de97c9 (
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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
import { useSelector } from 'react-redux'
import { Link as RouterLink } from 'react-router-dom'
import { Button, Card, CardActions, CardContent, Grid, Typography } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import ProgressPanel from './ProgressPanel'
const useStyles = makeStyles((_theme) => ({
mainHead: {
width: '100%',
backgroundColor: '#404040',
color: '#fff'
},
title: {
fontSize: 14,
color: '#80ff80'
}
}))
// Card displaying user dashboard home page header.
function MainCard () {
const classes = useStyles()
const user = useSelector(state => state.auth.user)
const dashboard = process.env.REACT_APP_NAME
const button = 'My ' + process.env.REACT_APP_DIAGRAMS_NAME
return (
<Card className={classes.mainHead}>
<CardContent>
<Typography className={classes.title} gutterBottom>
Welcome to your {dashboard} Dashboard
</Typography>
<Typography variant='h5' component='h2'>
Welcome {user.username}...
</Typography>
</CardContent>
<CardActions>
<Button
component={RouterLink}
to='/dashboard/schematics'
color='primary'
size='small'
>
{button}
</Button>
</CardActions>
</Card>
)
}
export default function DashboardHome () {
const classes = useStyles()
const user = useSelector(state => state.auth.user)
const typography = 'Track your ' + process.env.REACT_APP_SMALL_DIAGRAMS_NAME + ' status here...'
return (
<>
<Grid
container
direction='row'
justifyContent='flex-start'
alignItems='flex-start'
alignContent='center'
spacing={3}
>
{/* User Dashboard Home Header */}
<Grid item xs={12}>
<MainCard />
</Grid>
<Grid item xs={12}>
<Card style={{ padding: '7px 15px' }} className={classes.mainHead}>
<Typography variant='subtitle1' gutterBottom>
Hey {user.username} , {typography}
</Typography>
</Card>
</Grid>
{/* List recent schematics saved by user */}
<Grid item xs={12}>
<Card>
<ProgressPanel />
</Card>
</Grid>
</Grid>
</>
)
}
|
