import { GetAvatar } from "@/app/[language]/avatar/query/useGetAvatar"; import AvatarPlaceText from "@/components/AvatarPlaceText"; import { wwwAPIPath } from "@/utilities/wwwAPI"; import Image from "next/image"; import Card from "react-bootstrap/Card"; import CardBody from "react-bootstrap/CardBody"; import CardFooter from "react-bootstrap/CardFooter"; import CardHeader from "react-bootstrap/CardHeader"; export default function AbilityClassesView({ avatar, inputMode, }: { avatar: GetAvatar; inputMode: "5K" | "7K" | "9K"; }) { const avatarAbility = avatar[`avatarAbility${inputMode}`]; const avatarAbilityPlace = avatar[`avatarAbility${inputMode}Place`]; const avatarAbilityCount = avatar[`avatarAbility${inputMode}Count`]; const avatarAbilityText = avatar[`avatarAbility${inputMode}Text`]; return ( <Card> <CardHeader> <Image alt="" src={`${wwwAPIPath}/drawing?abilityClass${inputMode}=${avatarAbility}`} width={96} height={96} /> </CardHeader> <CardBody> <AvatarPlaceText avatarPlace={avatarAbilityPlace} avatarCount={avatarAbilityCount} /> </CardBody> <CardFooter>{avatarAbilityText} Point</CardFooter> </Card> ); }