import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { ListGroup, Badge } from "reactstrap"; import LevelItem from "src/avatar/LevelItem"; import { useAvatarStore } from "src/Stores"; export default observer(() => { const { levels, isLoading } = useAvatarStore(); const { t } = useTranslation(); if (!isLoading && !levels.length) { return null; } return ( <ListGroup> <Badge color="success">{t("wwwLevel")}</Badge> {levels.map(({ levelID, title, levelText, level, date }) => ( <LevelItem key={levelID} levelID={levelID} title={title} levelText={levelText} level={level} date={date} /> ))} </ListGroup> ); });