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 TitleItem from "src/etc/TitleItem"; export default observer(() => { const { totalTitleValues } = useEtcStore(); const { t } = useTranslation(); return ( <ListGroup> <Badge>{t("etcTotalTitles")}</Badge> {totalTitleValues.map(({ title, titleColor, value }) => ( <TitleItem key={title} title={title} titleColor={titleColor} text={sprintf(t("avatarCountText"), value)} /> ))} </ListGroup> ); });