import scss from "@/etc/ModeItem.module.scss"; import { formatText } from "@/Utility"; import { EtcAPIMode } from "@/wwwAPI"; import { useTranslations } from "next-intl"; import Image, { StaticImageData } from "next/image"; import { Badge, Col, ListGroup, ListGroupItem, Row } from "reactstrap"; export default function ModeItem({ title, modes, drawings, }: { title: string; modes: EtcAPIMode[]; drawings: (string | StaticImageData)[]; }) { const t = useTranslations(); return ( <ListGroup> <Badge color="success">{title}</Badge> {modes.map(({ mode, value }) => { return ( value > 0 && ( <ListGroupItem key={mode}> <Row className="g-0"> <Col className="m-1"> <Image className={scss.mode} alt="" src={drawings[mode]} /> </Col> <Col className="m-1" xs="auto"> <span>{t("textHandled", { value: formatText(value) })}</span> </Col> </Row> </ListGroupItem> ) ); })} </ListGroup> ); }