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
42 lines
973 B
TypeScript
42 lines
973 B
TypeScript
import { Grid, Tooltip, Typography } from '@material-ui/core/'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
import { Info } from '@material-ui/icons'
|
|
import type { ReactElement } from 'react'
|
|
|
|
interface TitleProps {
|
|
label: string
|
|
tooltip?: string
|
|
}
|
|
|
|
const useStyles = makeStyles({
|
|
title: {
|
|
fontSize: 16,
|
|
},
|
|
})
|
|
|
|
export function Title({ label, tooltip }: TitleProps): ReactElement {
|
|
const classes = useStyles()
|
|
|
|
if (!tooltip) {
|
|
return (
|
|
<Typography className={classes.title} color="textSecondary" gutterBottom>
|
|
{label}
|
|
</Typography>
|
|
)
|
|
}
|
|
|
|
// span is needed as Tooltip expects a non-functional element!
|
|
return (
|
|
<Tooltip title={tooltip}>
|
|
<span>
|
|
<Grid container direction="row" justify="space-between">
|
|
<Typography className={classes.title} color="textSecondary" gutterBottom>
|
|
{label}
|
|
</Typography>
|
|
<Info />
|
|
</Grid>
|
|
</span>
|
|
</Tooltip>
|
|
)
|
|
}
|