Avatar

import { Avatar, AvatarGroup } from "@/registry/ds/avatar";

const docentes = ["Julia Arce", "Martín Ferro", "Lucía Paz", "Pedro Núñez", "Ana Rey", "Sofía Lema"];

/** Grupos: se superponen y, pasado `max`, resumen en "+N" con nombre accesible. Y la escala completa de tamaños */
export default function AvatarGroupExample() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-wrap items-center gap-8">
        <AvatarGroup size="md" max={4} label="Docentes de la cátedra">
          {docentes.map((n) => (
            <Avatar key={n} size="md" name={n} />
          ))}
        </AvatarGroup>
        <AvatarGroup size="sm" label="Compañeros de grupo">
          {docentes.slice(0, 3).map((n) => (
            <Avatar key={n} size="sm" name={n} />
          ))}
        </AvatarGroup>
      </div>
      <div className="flex flex-wrap items-end gap-4">
        {(["xs", "sm", "md", "lg", "xl"] as const).map((size) => (
          <div key={size} className="flex flex-col items-center gap-2">
            <Avatar size={size} name="Julia Arce" />
            <span className="font-mono text-xs text-fg-subtle">{size}</span>
          </div>
        ))}
      </div>
    </div>
  );
}