import { useTranslation } from "react-i18next"; import { Badge, ListGroup } from "reactstrap"; import { observer } from "mobx-react-lite"; import { sprintf } from "sprintf-js"; import { useEtcStore } from "src/Stores"; import EdgeItem from "src/etc/EdgeItem"; export default observer(() => { const { totalEdges } = useEtcStore(); const { t } = useTranslation(); return ( <ListGroup> <Badge>{t("etcTotalEdges")}</Badge> {totalEdges.map(({ edge, value }) => ( <EdgeItem key={edge} edge={edge} text={sprintf(t("avatarCountText"), value)} /> ))} </ListGroup> ); });