Vojtech Simetka
bc01d60728
* style: add eslint configuration as per bee-js * chore: add `plugin:react/reocommended` in `.eslintrc` Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com> * chore: add `consistent` to `array-bracket-newline` as per review * style: after automatic fixes with `npm run lint` * style: fixed all linter errors * refactor: fixed all linter warnings * chore: added missing new line at end of `.prettierrc` file Co-authored-by: nugaon <50576770+nugaon@users.noreply.github.com>
51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import type { ReactElement } from 'react'
|
|
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import { Card, CardContent, Typography } from '@material-ui/core/'
|
|
import { Skeleton } from '@material-ui/lab'
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
minWidth: 275,
|
|
},
|
|
title: {
|
|
fontSize: 16,
|
|
},
|
|
pos: {
|
|
marginBottom: 12,
|
|
},
|
|
})
|
|
|
|
interface Props {
|
|
label: string
|
|
statistic?: string
|
|
loading?: boolean
|
|
}
|
|
|
|
export default function StatCard({ loading, label, statistic }: Props): ReactElement {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<Card className={classes.root}>
|
|
<CardContent>
|
|
{loading && (
|
|
<>
|
|
<Skeleton width={180} height={25} animation="wave" />
|
|
<Skeleton width={180} height={35} animation="wave" />
|
|
</>
|
|
)}
|
|
{!loading && (
|
|
<>
|
|
<Typography className={classes.title} color="textSecondary" gutterBottom>
|
|
{label}
|
|
</Typography>
|
|
<Typography variant="h5" component="h2">
|
|
{statistic}
|
|
</Typography>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|