import { EtcAPIMode } from "@/type/wwwAPI"; import { formatText } from "@/utilities/Utility"; import { useTranslations } from "next-intl"; import Image, { StaticImageData } from "next/image"; import Col from "react-bootstrap/Col"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; import Row from "react-bootstrap/Row"; export default function ModesView({ title, modes, drawings, }: { title: string; modes: EtcAPIMode[]; drawings: (string | StaticImageData)[]; }) { const t = useTranslations(); return ( <ListGroup> <ListGroupItem>{title}</ListGroupItem> {modes.map(({ mode, value }) => { return ( value > 0 && ( <ListGroupItem key={mode}> <Row> <Col> <Image height={24} alt="" src={drawings[mode]} /> </Col> <Col xs="auto"> {t("textHandled", { value: formatText(value) })} </Col> </Row> </ListGroupItem> ) ); })} </ListGroup> ); }