import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { Badge, ListGroup } from "reactstrap"; import { useAvatarStore } from "src/Stores"; import NoteItem from "src/note/NoteItem"; import { AvatarLoading } from "../Loading"; export default observer(() => { const { lasts, isLastsLoading } = useAvatarStore(); const { t } = useTranslation(); const { avatarID } = useAvatarStore(); return ( <ListGroup> <Badge color="primary">{t("avatarLastsText")}</Badge> {isLastsLoading ? ( <AvatarLoading /> ) : ( lasts.map( ({ noteID, artist, title, genre, levelText, level, fittedText }) => ( <NoteItem key={noteID} noteID={noteID} artist={artist} title={title} genre={genre} levelText={levelText} level={level} fittedText={fittedText} wantAvatarID={avatarID} /> ), ) )} </ListGroup> ); });