import NoteView from "@/app/[language]/note/components/NoteView"; import { useSiteStore } from "@/state/Stores"; import { EtcAPINoteFile } from "@/type/wwwAPI"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; export default observer<{ totalNoteFiles: EtcAPINoteFile[]; }>(({ totalNoteFiles }) => { const { siteAvatarID } = useSiteStore(); const t = useTranslations(); return ( <ListGroup> <ListGroupItem>{t("etcTotalNoteFiles")}</ListGroupItem> {totalNoteFiles.map( ({ noteID, artist, title, genre, levelText, level, value }) => ( <ListGroupItem key={noteID}> <NoteView noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={t("textHandled", { value })} wantAvatarID={siteAvatarID} /> </ListGroupItem> ), )} </ListGroup> ); });