Avatar

import { Avatar, AvatarGroup } from "@paytime/ui";

export default function Example() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Avatar size="xs" name="Ana Costa" />
      <Avatar size="sm" name="Pedro Lima" />
      <Avatar name="Luiza Gomes" presence="online" />
      <Avatar size="lg" name="Rafael Souza" />
      <Avatar size="xl" name="Marina Dias" />
      <AvatarGroup
        people={[
          { id: "1", name: "Ana Costa" },
          { id: "2", name: "Pedro Lima" },
          { id: "3", name: "Luiza Gomes" },
          { id: "4", name: "Rafael Souza" },
          { id: "5", name: "Marina Dias" },
        ]}
      />
    </div>
  );
}