forked from tl-its-umich-edu/canvas-course-manager-next
-
Notifications
You must be signed in to change notification settings - Fork 0
/
FeatureCard.tsx
68 lines (59 loc) · 1.74 KB
/
FeatureCard.tsx
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
import React from 'react'
import { styled } from '@mui/material/styles'
import { Link as RouterLink } from 'react-router-dom'
import { Card, CardActionArea, CardContent, Grid, Typography } from '@mui/material'
import { FeatureUIProps } from '../models/FeatureUIData.js'
const PREFIX = 'FeatureCard'
const classes = {
cardContent: `${PREFIX}-cardContent`,
centered: `${PREFIX}-centered`,
title: `${PREFIX}-title`,
cardLink: `${PREFIX}-cardLink`
}
const StyledRouterLink = styled(RouterLink)((
{
theme
}
) => ({
[`& .${classes.cardContent}`]: {
backgroundColor: '#FAFAFA',
height: 200
},
[`& .${classes.centered}`]: {
width: '100%'
},
[`& .${classes.title}`]: {
fontSize: 14
},
[`&.${classes.cardLink}`]: {
textDecoration: 'none'
}
}))
function FeatureCard (props: FeatureUIProps): JSX.Element {
return (
<StyledRouterLink className={classes.cardLink} to={props.route} tabIndex={-1}>
<Card variant='outlined'>
<CardActionArea>
<CardContent className={`${classes.cardContent}`}>
<Grid container>
<Grid item xs={12}>
<div className={classes.centered}>
{props.icon}
</div>
<div className={classes.centered}>
<Typography className={classes.title} color='textPrimary' gutterBottom>
{props.data.title}
</Typography>
<Typography variant='body2' color='textSecondary'>
{props.data.description}
</Typography>
</div>
</Grid>
</Grid>
</CardContent>
</CardActionArea>
</Card>
</StyledRouterLink>
)
}
export default FeatureCard