Avatar

import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'

export default function Example() {
  return (
    <>
      {/* Basic avatar with image */}
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>

      {/* Fallback only */}
      <Avatar>
        <AvatarFallback>JD</AvatarFallback>
      </Avatar>

      {/* Different sizes */}
      <Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
      <Avatar size="md"><AvatarFallback>MD</AvatarFallback></Avatar>
      <Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>
      <Avatar size="xl"><AvatarFallback>XL</AvatarFallback></Avatar>

      {/* Avatar group with overlap */}
      <div className="flex -space-x-3">
        <Avatar className="border-2 border-white">
          <AvatarFallback>A</AvatarFallback>
        </Avatar>
        <Avatar className="border-2 border-white">
          <AvatarFallback>B</AvatarFallback>
        </Avatar>
        <Avatar className="border-2 border-white">
          <AvatarFallback>+3</AvatarFallback>
        </Avatar>
      </div>

      {/* With user info */}
      <div className="flex items-center gap-3">
        <Avatar>
          <AvatarImage src="/user.jpg" />
          <AvatarFallback>UN</AvatarFallback>
        </Avatar>
        <div>
          <p className="font-medium">User Name</p>
          <p className="text-sm text-slate-500">user@email.com</p>
        </div>
      </div>
    </>
  )
}