DashboardOverview.tsx 3.26 KB
Newer Older
1
import { createStyles, makeStyles, Card, Typography, Link, Theme } from '@material-ui/core';
2
3
4
5
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
import PeopleAltIcon from '@material-ui/icons/PeopleAlt';
import DescriptionIcon from '@material-ui/icons/Description';
import ContactSupportIcon from '@material-ui/icons/ContactSupport';
6
7
8
9
10
11
12
13
import {
  borderRadiusSize,
  brightBlue,
  brightOrange,
  darkGray,
  darkOrange,
  iconGray,
} from '../../../Constants/Constants';
14
import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn';
15

16
const useStyles = makeStyles((theme: Theme) =>
17
18
  createStyles({
    overviewCard: {
19
      minWidth: 230,
20
21
22
23
24
25
26
27
28
      height: 90,
      backgroundColor: '#fff',
      boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
      transition: 'all 0.2s ease-out',
      '&:hover': {
        boxShadow: '2px 2px 15px rgba(0,0,0,0.15)',
        transform: 'scale(1.03)',
        transition: 'all 0.2s ease-out',
      },
29
30
31
32
33
34
35
36
37
38
      margin: theme.spacing(2, 0),
      width: '100%',
      [theme.breakpoints.up('sm')]: {
        margin: theme.spacing(2.5, 1, 2, 1),
        width: '46%',
      },
      [theme.breakpoints.up(1200)]: {
        margin: theme.spacing(2.5, 1, 2, 1),
        width: '22%',
      },
39
40
41
42
43
44
45
46
47
48
49
50
    },

    overviewAnchor: {
      width: '100%',
      display: 'flex',
      alignItems: 'center',
      '&:hover': { textDecoration: 'none' },
    },

    overviewIcon: {
      height: '100%',
      width: 85,
51
52
      padding: theme.spacing(2),
      marginRight: theme.spacing(1),
53
      color: iconGray,
54
      borderRadius: borderRadiusSize,
55
56
57
    },
    overviewTitle: {
      color: darkGray,
58
      paddingRight: theme.spacing(1),
59
60
61
    },
  })
);
62
63

export default function DashboardOverview() {
64
65
66
67
68
69
70
71
  const classes = useStyles();

  const overviewItemData = [
    {
      title: 'Projects and Working Groups',
      icon: (
        <BusinessCenterIcon
          className={classes.overviewIcon}
72
          style={{
73
            borderBottom: `6px ${darkOrange} solid`,
74
          }}
75
76
77
78
79
80
81
82
83
        />
      ),
      href: '#projects-wg',
    },
    {
      title: 'Committer and Contributors',
      icon: (
        <PeopleAltIcon
          className={classes.overviewIcon}
84
          style={{
85
            borderBottom: `6px ${brightBlue} solid`,
86
          }}
87
88
89
90
91
92
93
94
95
        />
      ),
      href: '#committers-contributors',
    },
    {
      title: 'Resources',
      icon: (
        <DescriptionIcon
          className={classes.overviewIcon}
96
          style={{
97
            borderBottom: `6px ${brightOrange} solid`,
98
          }}
99
100
101
102
103
104
105
106
107
        />
      ),
      href: '#resources',
    },
    {
      title: 'FAQs',
      icon: (
        <ContactSupportIcon
          className={classes.overviewIcon}
108
          style={{
109
            borderBottom: `6px ${darkGray} solid`,
110
          }}
111
112
113
114
115
116
117
        />
      ),
      href: '#faqs',
    },
  ];

  const renderOverviewItems = overviewItemData.map((item) => (
118
    <Card key={item.title} className={classes.overviewCard}>
119
120
121
122
123
124
125
126
127
128
      <Link className={classes.overviewAnchor} href={item.href}>
        {item.icon}
        <Typography className={classes.overviewTitle} component="h6" variant="h6">
          {item.title}
        </Typography>
      </Link>
    </Card>
  ));

  return (
129
130
131
    <SectionCtn title="Overview" id="overview">
      {renderOverviewItems}
    </SectionCtn>
132
133
  );
}