feat: add tooltips and health indicator to peers (#169)

* 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

src/components/Title.tsx

@@ -0,0 +1,41 @@
+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>
+  )
+}