import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { ListGroup, Badge } from "reactstrap"; import { sprintf } from "sprintf-js"; import { useEtcStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; export default observer(() => { const { totalNoteFileValues } = useEtcStore(); const { t } = useTranslation(); return ( <ListGroup> <Badge>{t("etcTotalNoteFiles")}</Badge> {totalNoteFileValues.map( ({ noteID, artist, title, genre, levelText, level, value }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={sprintf(t("handledUnit"), value)} /> ), )} </ListGroup> ); });