Cafe137
480f6dc7f9
* feat: add value thresholds and explanations to topology stats * feat: extract title and row, refactor threshold, add tooltip, add overall health * refactor: clean up code * refactor: reword Node to Bee node
44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import { Card, CardContent, Typography } from '@material-ui/core/'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import { Skeleton } from '@material-ui/lab'
|
|
import type { ReactElement } from 'react'
|
|
import { Title } from './Title'
|
|
|
|
const useStyles = makeStyles({
|
|
root: {
|
|
minWidth: 275,
|
|
},
|
|
})
|
|
|
|
interface Props {
|
|
label: string
|
|
statistic?: string
|
|
loading?: boolean
|
|
tooltip?: string
|
|
}
|
|
|
|
export default function StatCard({ loading, label, statistic, tooltip }: 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 && (
|
|
<>
|
|
<Title label={label} tooltip={tooltip} />
|
|
<Typography variant="h5" component="h2">
|
|
{statistic}
|
|
</Typography>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|