آواتار (Avatar)

import { Avatar, AvatarImage, AvatarFallback } from '@parto-system-design/ui'

<Avatar>
  <AvatarImage src="/avatar.jpg" alt="نام کاربر" />
  <AvatarFallback>م ا</AvatarFallback>
</Avatar>

<Avatar>
  <AvatarImage src="/broken-url.jpg" alt="کاربر" />
  <AvatarFallback>ک ز</AvatarFallback>
</Avatar>

<div className="flex items-center gap-4">
  <Avatar className="size-6">
    <AvatarImage src="/avatar.jpg" alt="کوچک" />
    <AvatarFallback className="text-xs">ک</AvatarFallback>
  </Avatar>

  <Avatar>
    <AvatarImage src="/avatar.jpg" alt="متوسط (پیش‌فرض)" />
    <AvatarFallback>م</AvatarFallback>
  </Avatar>

  <Avatar className="size-12">
    <AvatarImage src="/avatar.jpg" alt="بزرگ" />
    <AvatarFallback>ب</AvatarFallback>
  </Avatar>
</div>

<div className="flex -space-x-2">
  <Avatar className="border-2 border-background">
    <AvatarImage src="/user1.jpg" alt="کاربر ۱" />
    <AvatarFallback>ک۱</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-background">
    <AvatarImage src="/user2.jpg" alt="کاربر ۲" />
    <AvatarFallback>ک۲</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-background">
    <AvatarFallback aria-label="۳ نفر دیگر">+۳</AvatarFallback>
  </Avatar>
</div>