import scss from "@/app/[language]/site/components/AvatarItem.module.scss"; import { OnAvatarInput } from "@/app/[language]/site/type"; import ac1 from "@/assets/ac1.png"; import ac2 from "@/assets/ac2.png"; import ac3 from "@/assets/ac3.png"; import ac4 from "@/assets/ac4.png"; import valve from "@/assets/valve.png"; import AvatarDrawing from "@/components/AvatarDrawing"; import AvatarTitle from "@/components/AvatarTitle"; import Image from "next/image"; import { Col, Row } from "reactstrap"; const acs = ["", ac1, ac2, ac3, ac4]; export default function AvatarItem({ avatarID, avatarName, avatarConfigure, isSiteHand, isMe, isValve, isAudioInput, onAvatarInput, }: { avatarID: string; avatarName: string; avatarConfigure: number; isSiteHand: boolean; isMe: boolean; isValve: boolean; isAudioInput: boolean; onAvatarInput: OnAvatarInput; }) { return ( <Row className={`g-0 ${isMe ? "target" : ""}`} onContextMenu={(e) => { e.preventDefault(); onAvatarInput(e, avatarID); }} > <Col className="m-1" xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col className="m-1" xs="auto"> {avatarID && <AvatarTitle avatarID={avatarID} />} <span className={isAudioInput ? scss.audioInput : undefined}> {avatarName} </span> <br /> {isValve && ( <> {" "} <Image alt="" src={valve} height={24} /> </> )} {acs[avatarConfigure] && ( <> {" "} <Image alt="" src={acs[avatarConfigure]} className={scss.avatarConfigure} /> </> )} {isSiteHand && ( <> {" "} <Image alt="" src={acs[1]} className={scss.avatarConfigure} /> </> )} </Col> </Row> ); }