import AvatarDrawing from "@/AvatarDrawing"; import AvatarTitle from "@/AvatarTitle"; import { HOF } from "@/hof/HOF"; import { Col, ListGroupItem, Row } from "reactstrap"; import { useTo } from "taehui-ts/fe-utility"; export default function AvatarItem({ avatarID, avatarName, text }: HOF) { const to = useTo(); return ( <ListGroupItem key={avatarID}> <Row className="g-0 route" onClick={() => { to(`/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> ); }