import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar"; import AvatarDrawing from "@/components/AvatarDrawing"; import AvatarTitle from "@/components/AvatarTitle"; import { useTranslations } from "next-intl"; import Card from "react-bootstrap/Card"; import CardBody from "react-bootstrap/CardBody"; import CardFooter from "react-bootstrap/CardFooter"; import CardHeader from "react-bootstrap/CardHeader"; import ProgressBar from "react-bootstrap/ProgressBar"; import Stack from "react-bootstrap/Stack"; export default function MainView({ avatar }: { avatar: GetAvatar }) { const t = useTranslations(); return ( <Card> <CardHeader> <Stack gap={2} direction="horizontal"> <AvatarDrawing avatarID={avatar.avatarID} /> <Stack gap={2}> <Stack gap={2} direction="horizontal"> <AvatarTitle avatarID={avatar.avatarID} /> {avatar.avatarName} ({avatar.avatarID}) </Stack> LV. {avatar.avatarLevel} <ProgressBar now={(100 * avatar.avatarXP) / avatar.totalAvatarXP} /> </Stack> </Stack> </CardHeader> <CardBody> <Stack gap={2}> <Stack gap={2} direction="horizontal"> {t("totalCountText", { totalCount: avatar.totalCount, })} </Stack> <span>{t("topCountText", { topCount: avatar.topCount })}</span> <span>{avatar.totalLength}</span> </Stack> </CardBody> <CardFooter>{t("avatarDate", { date: avatar.date })}</CardFooter> </Card> ); }