react-healthy
Version:
Incrementally check and alert your users to the health of your APIs
7 lines (4 loc) • 1.25 kB
JavaScript
import { cx, css } from '@emotion/css';
import React from 'react';
const DEFAULT_MESSAGES={ERROR:"Service Interruption",OPERATIONAL:"Operational"};function StatusRow(a){let{name:b,hasError:c,className:e="",messages:d}=a;const f=(null===d||void 0===d?void 0:d.error)||DEFAULT_MESSAGES.ERROR,g=(null===d||void 0===d?void 0:d.operational)||DEFAULT_MESSAGES.OPERATIONAL;return/*#__PURE__*/React.createElement("div",{className:cx(rowStyles,e),"data-testid":"row"},/*#__PURE__*/React.createElement("div",{className:infoStyles},/*#__PURE__*/React.createElement("h4",null,b)),/*#__PURE__*/React.createElement("div",{className:statusStyles},/*#__PURE__*/React.createElement("span",{className:cx(indicatorStyles,c?"error":"ok")},c?f:g)))}const rowStyles=css({color:"#3d464d",padding:"10px 20px",display:"flex",fontFamily:"inherit",alignItems:"center",border:"1px solid #e0e0e0",borderTop:"none","&:last-child":{borderRadius:"0 0 4px 4px"},"&.first":{borderRadius:"4px 4px 0 0",borderTop:"1px solid #e0e0e0 !important"}}),infoStyles=css({flex:"2","& h4":{margin:"5px",textAlign:"left"}}),statusStyles=css({textAlign:"right",flex:"1"}),indicatorStyles=css({"&.ok":{color:"#2ecc71"},"&.error":{color:"#ef5350"}});
export { StatusRow, StatusRow as default };