Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | 8x 8x 2x 2x 13x 8x 8x 8x 7x | import type { CollectionMembership, Invitation } from "@/types";
import { Badge } from "@/components/ui";
import { RoleBadge } from "./RoleBadge";
import { MemberRemoveButton } from "./MemberRemoveButton";
import { CopyInviteLinkButton } from "./CopyInviteLinkButton";
interface MemberListProps {
members: CollectionMembership[];
pending?: Invitation[];
canManage?: boolean;
}
/** First visible character of a name (or email), uppercased, for the avatar. */
function initial(source: string | undefined): string {
const trimmed = source?.trim() ?? "";
return trimmed ? trimmed[0].toUpperCase() : "?";
}
const avatarBase =
"flex h-11 w-11 shrink-0 items-center justify-center rounded-full text-base font-semibold";
const rowBase =
"flex items-center gap-4 rounded-card border border-rim bg-glass shadow-card px-4 py-3";
export function MemberList({ members, pending = [], canManage = false }: MemberListProps) {
return (
<ul className="space-y-3">
{members.map((member) => {
const isOwner = member.role === "owner";
const display = member.name?.trim() || member.email || "Member";
return (
<li key={member.id} className={rowBase}>
<span
aria-hidden="true"
className={`${avatarBase} ${isOwner ? "bg-content-deeper text-white" : "bg-content-soft text-ink"}`}
>
{initial(member.name || member.email)}
</span>
<div className="min-w-0 flex-1">
<p className="truncate font-medium text-ink">{display}</p>
{member.email && member.name?.trim() && (
<p className="truncate text-sm text-ink-soft">{member.email}</p>
)}
</div>
<RoleBadge role={member.role} />
{canManage && !isOwner && (
<MemberRemoveButton collectionId={member.collectionId} memberId={member.id} />
)}
</li>
);
})}
{pending.map((invite) => (
<li key={invite.id} className={rowBase}>
<span
aria-hidden="true"
className={`${avatarBase} border border-dashed border-hairline text-ink-soft`}
>
{"✦"}
</span>
<div className="min-w-0 flex-1">
<p className="truncate font-medium text-ink">{invite.email}</p>
<p className="truncate text-sm text-ink-soft">Invitation sent</p>
</div>
<Badge variant="pending">Pending</Badge>
{canManage && <CopyInviteLinkButton token={invite.token} />}
</li>
))}
</ul>
);
}
|