import { Row, Col, ListGroup, Badge, ListGroupItem } from "reactstrap"; import { useTranslation } from "react-i18next"; import { observer } from "mobx-react-lite"; import { sprintf } from "sprintf-js"; import { formatText } from "src/Utility"; import { EtcAPIMode } from "src/wwwAPI"; export default observer( ({ title, values, drawings, }: { title: string; values: EtcAPIMode[]; drawings: string[]; }) => { const { t } = useTranslation(); return ( <ListGroup> <Badge color="success">{title}</Badge> {values.map(({ mode, value }) => { return ( value > 0 && ( <ListGroupItem key={mode}> <Row className="g-0"> <Col className="m-1"> <img className="mode" alt="" src={drawings[mode]} /> </Col> <Col className="m-1" xs="auto"> <span>{sprintf(t("textHandled"), formatText(value))}</span> </Col> </Row> </ListGroupItem> ) ); })} </ListGroup> ); }, );