import { Col, Row, ListGroupItem } from "reactstrap"; import { useTo } from "taehui-ts/fe-utility"; import { Avatar } from "src/wow/Wow"; import AvatarDrawing from "src/AvatarDrawing"; import AvatarTitle from "src/AvatarTitle"; export default function AvatarItem({ avatarID, avatarName, text }: Avatar) { const to = useTo(); return ( <ListGroupItem key={avatarID}> <Row className="g-0 route" onClick={() => { to(`/qwilight/avatar/${encodeURIComponent("#")}${avatarID}`); }} > <Col className="m-1" xs="auto"> <AvatarDrawing avatarID={avatarID} /> </Col> <Col className="m-1" xs="auto"> {avatarID && <AvatarTitle avatarID={avatarID} />}{" "} <span>{avatarName}</span> <br /> <span>{text}</span> </Col> </Row> </ListGroupItem> ); }