Avatar

사용자 프로필 이미지를 표시하는 컴포넌트

Basic Usage

이미지가 로드되지 않으면 Fallback이 표시됩니다.

CNJD

tsx

<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarFallback>JD</AvatarFallback>
</Avatar>

Sizes

3가지 크기를 제공합니다: sm, default, lg

SMMDLG

tsx

<Avatar size="sm">
  <AvatarFallback>SM</AvatarFallback>
</Avatar>
<Avatar size="default">
  <AvatarFallback>MD</AvatarFallback>
</Avatar>
<Avatar size="lg">
  <AvatarFallback>LG</AvatarFallback>
</Avatar>

With Badge

온라인 상태 등을 나타내는 뱃지를 추가할 수 있습니다.

CNJD

tsx

<Avatar>
  <AvatarImage src="..." alt="User" />
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge className="bg-green-500" />
</Avatar>

Avatar Group

여러 아바타를 겹쳐서 그룹으로 표시합니다.

ABC

tsx

<AvatarGroup>
  <Avatar>
    <AvatarFallback>A</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>B</AvatarFallback>
  </Avatar>
  <Avatar>
    <AvatarFallback>C</AvatarFallback>
  </Avatar>
  <AvatarGroupCount>+5</AvatarGroupCount>
</AvatarGroup>

Usage

tsx

import { Avatar, AvatarImage, AvatarFallback } from '@gpters-internal/ui';

function Example() {
  return (
    <Avatar>
      <AvatarImage src="https://example.com/avatar.jpg" alt="User" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  );
}