Avatar

import { Avatar } from "@/ui/avatar";

export default function AvatarDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar.Root>
        <Avatar.Image
          src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&q=80"
          alt="Lara Tucci"
        />
        <Avatar.Fallback delay={600}>LT</Avatar.Fallback>
      </Avatar.Root>
      <Avatar.Root>
        <Avatar.Fallback>AY</Avatar.Fallback>
      </Avatar.Root>
    </div>
  );
}

import { Avatar } from "@/ui/avatar";

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

export default function AvatarSizesDemo() {
  return (
    <div className="flex items-center gap-4">
      {sizes.map((size) => (
        <Avatar.Root key={size} size={size}>
          <Avatar.Fallback>AY</Avatar.Fallback>
        </Avatar.Root>
      ))}
    </div>
  );
}

import { Avatar } from "@/ui/avatar";

export default function AvatarFallbackDemo() {
  return (
    <Avatar.Root>
      <Avatar.Image src="https://invalid.example/avatar.jpg" alt="Arshad Yaseen" />
      <Avatar.Fallback>AY</Avatar.Fallback>
    </Avatar.Root>
  );
}

import { Avatar } from "@/ui/avatar";

const people = [
  { name: "Lara Tucci", initials: "LT", src: "https://i.pravatar.cc/80?img=5" },
  { name: "Devon Lane", initials: "DL", src: "https://i.pravatar.cc/80?img=12" },
  { name: "Noah Pierre", initials: "NP", src: "https://i.pravatar.cc/80?img=33" },
];

export default function AvatarGroupDemo() {
  return (
    <div className="flex -space-x-2">
      {people.map((person) => (
        <Avatar.Root key={person.name} className="ring-2 ring-background">
          <Avatar.Image src={person.src} alt={person.name} />
          <Avatar.Fallback>{person.initials}</Avatar.Fallback>
        </Avatar.Root>
      ))}
      <Avatar.Root className="ring-2 ring-background">
        <Avatar.Fallback>+5</Avatar.Fallback>
      </Avatar.Root>
    </div>
  );
}