import { useTranslation } from "react-i18next"; import { Badge, ListGroup, ListGroupItem } from "reactstrap"; import { GetAvatar } from "src/avatar/useGetAvatar"; const quitItems = ["S+", "S", "A+", "A", "B", "C", "D"]; export default function QuitStatusValues({ avatar: { quitStatusValues }, }: { avatar: GetAvatar; }) { 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> ); }