AvatarAvatar

사람의 이니셜, 봇, 이미지를 원형으로 보여주고 실행 중이면 점을 붙입니다. 점 테두리 색은 liveRingClassName으로 바꿉니다.Shows initials, a bot, or an image in a circle, with a dot while it runs. liveRingClassName matches the dot ring to the surface behind it.

@horon-ai/react 표시Display

MYMYMYMY

HHHH

tsx

import { Avatar } from "@horon-ai/react";

const sizes = ["sm", "md", "lg", "xl"] as const;

export default function AvatarDemo() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-3">
        {sizes.map((size) => (
          <Avatar key={size} size={size}>
            MY
          </Avatar>
        ))}
      </div>
      <div className="flex items-center gap-3">
        {sizes.map((size) => (
          <Avatar key={size} type="bot" size={size} />
        ))}
      </div>
      <div className="flex items-center gap-3">
        {sizes.map((size) => (
          <Avatar key={size} type="bot" size={size} live />
        ))}
      </div>
      <div className="flex items-center gap-3">
        {sizes.map((size) => (
          <Avatar key={size} type="image" size={size} src="/mascots/horon-mascot-face.webp" alt="Horon">
            H
          </Avatar>
        ))}
      </div>
    </div>
  );
}