@grafana/alerting
Version:
Grafana Alerting Library – Build vertical integrations on top of the industry-leading alerting solution
49 lines (46 loc) • 1.59 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { css } from '@emotion/css';
import { useStyles2, Stack } from '@grafana/ui';
;
const StateDot = ({ color }) => {
const styles = useStyles2(getDotStyles, { color });
return /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 0.5, children: /* @__PURE__ */ jsx("div", { className: styles.dot }) });
};
const getDotStyles = (theme, { color }) => {
const size = theme.spacing(1.25);
const outlineSize = `calc(${size} / 2.5)`;
const errorStyle = color === "error";
const successStyle = color === "success";
const warningStyle = color === "warning";
const infoStyle = color === "info";
return {
dot: css(
{
width: size,
height: size,
borderRadius: theme.shape.radius.circle,
backgroundColor: theme.colors.secondary.shade,
outline: `solid ${outlineSize} ${theme.colors.secondary.transparent}`,
margin: outlineSize
},
successStyle && css({
backgroundColor: theme.colors.success.main,
outlineColor: theme.colors.success.transparent
}),
warningStyle && css({
backgroundColor: theme.colors.warning.main,
outlineColor: theme.colors.warning.transparent
}),
errorStyle && css({
backgroundColor: theme.colors.error.main,
outlineColor: theme.colors.error.transparent
}),
infoStyle && css({
backgroundColor: theme.colors.info.main,
outlineColor: theme.colors.info.transparent
})
)
};
};
export { StateDot };
//# sourceMappingURL=StateDot.mjs.map