import TitleItem from "@/etc/TitleItem"; import { EtcAPITitle } from "@/wwwAPI"; import { useTranslations } from "next-intl"; import { Badge, ListGroup } from "reactstrap"; import { sprintf } from "sprintf-js"; export default function TotalTitlesView({ totalTitles, }: { totalTitles: EtcAPITitle[]; }) { const t = useTranslations(); return ( <ListGroup> <Badge>{t("etcTotalTitles")}</Badge> {totalTitles.map(({ title, titleColor, value }) => ( <TitleItem key={title} title={title} titleColor={titleColor} text={sprintf(t("avatarCountText"), value)} /> ))} </ListGroup> ); }