@pagerduty/backstage-plugin
Version:
A Backstage plugin that integrates towards PagerDuty
36 lines (33 loc) • 1.56 kB
JavaScript
import { makeStyles, Card, Typography } from '@material-ui/core';
import React from 'react';
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__ */ React.createElement(Card, { className: cardStyle }, count !== void 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, count), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, label)) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Typography, { className: largeTextStyle }, "-"), /* @__PURE__ */ React.createElement(Typography, { className: smallTextStyle }, label)));
}
export { IncidentCounterCard as default };
//# sourceMappingURL=InsightsCard.esm.js.map