@pagerduty/backstage-plugin
Version:
A Backstage plugin that integrates towards PagerDuty
43 lines (40 loc) • 1.59 kB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { Card } from '@backstage/ui';
import { makeStyles, Typography } from '@material-ui/core';
import validateColor from 'validate-color';
function IncidentCounterCard({ count, label, color, compact }) {
const textColor = color && validateColor(color) ? color : "black";
const useStyles = makeStyles(() => ({
cardStyle: {
marginRight: "10px",
height: compact !== true ? "120px" : "80px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: "rgba(0, 0, 0, 0.03)"
},
largeTextStyle: {
color: textColor,
fontSize: "30px",
marginTop: "-10px"
},
smallTextStyle: {
color: textColor,
fontWeight: "bold",
fontSize: "10px",
marginTop: "-5px",
textTransform: "uppercase",
flexWrap: "wrap"
}
}));
const { cardStyle, largeTextStyle, smallTextStyle } = useStyles();
return /* @__PURE__ */ jsx(Card, { className: cardStyle, children: count !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(Typography, { className: largeTextStyle, children: count }),
/* @__PURE__ */ jsx(Typography, { className: smallTextStyle, children: label })
] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(Typography, { className: largeTextStyle, children: "-" }),
/* @__PURE__ */ jsx(Typography, { className: smallTextStyle, children: label })
] }) });
}
export { IncidentCounterCard as default };
//# sourceMappingURL=InsightsCard.esm.js.map