43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
|
import { PersonAvatar } from "./person-avatar";
|
||
|
|
|
||
|
|
export function PersonAvatarGroup({
|
||
|
|
companyId,
|
||
|
|
people,
|
||
|
|
max = 3,
|
||
|
|
peopleLabel = "Personas",
|
||
|
|
}: {
|
||
|
|
companyId: string;
|
||
|
|
people: readonly { id: string; name: string; photoVersion?: string | null | undefined }[];
|
||
|
|
max?: number;
|
||
|
|
peopleLabel?: string;
|
||
|
|
}) {
|
||
|
|
const visible = people.slice(0, max);
|
||
|
|
const remaining = people.length - visible.length;
|
||
|
|
|
||
|
|
if (!people.length) {
|
||
|
|
return <span className="text-muted-foreground">—</span>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div aria-label={`${people.length} ${peopleLabel}`} className="flex items-center" role="group">
|
||
|
|
<div className="flex -space-x-2">
|
||
|
|
{visible.map((person) => (
|
||
|
|
<PersonAvatar
|
||
|
|
className="size-8 border-2 border-background"
|
||
|
|
companyId={companyId}
|
||
|
|
key={person.id}
|
||
|
|
name={person.name}
|
||
|
|
personId={person.id}
|
||
|
|
photoVersion={person.photoVersion}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{remaining > 0 && (
|
||
|
|
<span className="ml-2 inline-flex size-8 items-center justify-center rounded-full bg-muted text-xs font-medium text-muted-foreground">
|
||
|
|
+{remaining}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|