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
| import * as React from 'react';
| import { FC, createElement } from 'react';
| import { Card, Box, Typography, Divider } from '@mui/material';
| import { Link } from 'react-router-dom';
|
| const CardWithIcon = ({ icon, title, subtitle, to, children }) => (
| <Card
| sx={{
| minHeight: 52,
| display: 'flex',
| flexDirection: 'column',
| flex: '1',
| '& a': {
| textDecoration: 'none',
| color: 'inherit',
| },
| }}
| >
| <Box
| sx={{
| position: 'relative',
| overflow: 'hidden',
| padding: '16px',
| display: 'flex',
| justifyContent: 'space-between',
| alignItems: 'center',
| '& .icon': {
| color: 'primary.main',
| },
| '&:before': {
| position: 'absolute',
| top: '50%',
| left: 0,
| display: 'block',
| content: `''`,
| height: '200%',
| aspectRatio: '1',
| transform: 'translate(-30%, -60%)',
| borderRadius: '50%',
| backgroundColor: 'primary.main',
| opacity: 0.15,
| },
| }}
| >
| <Box width="3em" className="icon">
| {createElement(icon, { fontSize: 'large' })}
| </Box>
| <Box textAlign="right">
| <Typography color="textSecondary">{title}</Typography>
| <Typography variant="h5" component="h2">
| {subtitle || ' '}
| </Typography>
| </Box>
| </Box>
| {children && <Divider />}
| {children}
| </Card>
| );
|
| export default CardWithIcon;
|
|
