+ {content.map((item, index) => (
+
+ {item.name}
+ {item.tooltip && (
+
+
+
+ )}
+ {isLoading ? (
+
+ ) : (
+ {item.value}
+ )}
+
+ ))}
+ {footer && {footer}
}
+
+ );
+};
+
+const getStyles = (theme: GrafanaTheme2) => {
+ return {
+ container: css({
+ display: 'flex',
+ flexDirection: 'column',
+ gap: theme.spacing(2),
+ padding: theme.spacing(2),
+ }),
+ inner: css({
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ }),
+ indent: css({
+ marginLeft: theme.spacing(2),
+ }),
+ tooltip: css({
+ color: theme.colors.secondary.text,
+ }),
+ highlight: css({
+ color: theme.colors.warning.text,
+ padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`,
+ marginRight: `-${theme.spacing(1)}`,
+ }),
+ };
+};