import ac1 from "src/assets/ac1.png"; import ac2 from "src/assets/ac2.png"; import ac3 from "src/assets/ac3.png"; import ac4 from "src/assets/ac4.png"; import valve from "src/assets/valve.png"; import { OnAvatarInput } from "src/site/Site"; import AvatarDrawing from "src/AvatarDrawing"; import { Col, Row } from "reactstrap"; import AvatarTitle from "src/AvatarTitle"; import scss from "src/site/AvatarItem.module.scss"; 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 && ( <> {" "} <img alt="" src={valve} className={scss.avatarConfigure} /> </> )} {acs[avatarConfigure] && ( <> {" "} <img alt="" src={acs[avatarConfigure]} className={scss.avatarConfigure} /> </> )} {isSiteHand && ( <> {" "} <img alt="" src={acs[1]} className={scss.avatarConfigure} /> </> )} </Col> </Row> ); }