import { useTranslation } from "react-i18next"; import { observer } from "mobx-react-lite"; import { ListGroup, ListGroupItem, Badge } from "reactstrap"; import { useAvatarStore } from "src/Stores"; export default observer(() => { const { avatarIntro, isLoading } = useAvatarStore(); const { t } = useTranslation(); if (!isLoading && !avatarIntro) { return null; } return ( <ListGroup> <Badge>{t("avatarIntroText")}</Badge> <ListGroupItem> <span className="avatarIntro">{avatarIntro}</span> </ListGroupItem> </ListGroup> ); });