import { observer } from "mobx-react-lite"; import { useTranslation } from "react-i18next"; import { Badge, ListGroup, ListGroupItem } from "reactstrap"; import { useAvatarStore } from "src/Stores"; const quitItems = ["S+", "S", "A+", "A", "B", "C", "D"]; export default observer(() => { const { quitStatusValues } = useAvatarStore(); const { t } = useTranslation(); return ( <ListGroup> <Badge>{t("avatarQuitStatusText")}</Badge> {quitItems.map((quitItem) => ( <ListGroupItem key={quitItem}> <span className={quitItem}>{quitItem}</span>{" "} <span>{quitStatusValues[quitItems.indexOf(quitItem)]}</span> </ListGroupItem> ))} </ListGroup> ); });