Avatar Group

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { AvatarGroup } from "@/components/ui/avatar-group";

const members = [
  { name: "Sally Howe", image: "/avatars/sally.png" },
  { name: "Hunter Murazik", image: "/avatars/hunter.png" },
  { name: "Emma Will", image: "/avatars/emma.png" },
  { name: "Angel Lang", image: "/avatars/angel.png" },
  { name: "Myah Adams", image: "/avatars/myah.png" },
];

export function Members() {
  return (
    <AvatarGroup max={4}>
      {members.map((member) => (
        <Avatar key={member.name}>
          <AvatarImage src={member.image} alt={member.name} />
          <AvatarFallback>{member.name[0]}</AvatarFallback>
        </Avatar>
      ))}
    </AvatarGroup>
  );
}