Newer
Older
taehui / qwilight-fe / src / app / [language] / avatar / components / AbilityClassesView.tsx
@Taehui Taehui on 26 Mar 1 KB v1.0.0
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>
  );
}