import TitleItem from "@/app/[language]/etc/components/TitleItem"; import { EtcAPITitle } from "@/type/wwwAPI"; import { useTranslations } from "next-intl"; import ListGroup from "react-bootstrap/ListGroup"; import ListGroupItem from "react-bootstrap/ListGroupItem"; export default function TotalTitlesView({ totalTitles, }: { totalTitles: EtcAPITitle[]; }) { const t = useTranslations(); return ( <ListGroup> <ListGroupItem>{t("etcTotalTitles")}</ListGroupItem> {totalTitles.map(({ title, titleColor, value }) => ( <ListGroupItem key={title}> <TitleItem title={title} titleColor={titleColor} text={t("avatarCountText", { avatarCount: value })} /> </ListGroupItem> ))} </ListGroup> ); }