David
e061d60eb7
- Removed UserManagementDialog and updated UserManagement export in user list. - Adjusted CustomWorkspace to directly render UserManagement based on user permissions. - Enhanced IdentityWorkspace layout for better accessibility and visual appeal. - Introduced new AssetPanelSummary and WorkstationDetailPage components for asset management. - Implemented useListQuery for consistent data fetching across catalog and resources pages. - Added PersonAvatarGroup for displaying user avatars in a group format. - Created workstation detail controller and related tests for improved workstation management. - Added MetisLogo component for branding consistency.
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>
|
|
);
|
|
}
|