Team membersPro

The team and the invitations still out: invite several people with a role, change roles in place, suspend or remove someone, and resend or revoke an invite.

When to use

The team and its invitations: invite several people with a role, change roles, suspend or remove.
Any product with seats: workspace settings, admin consoles.

When not to use

Single-user products.
Managing customers rather than teammates: Orders table or a Data Table.

Usage

Team members with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { TeamMembers } from "@/components/dashral/blocks/team-members"
2
3<TeamMembers
4  members={members}
5  invites={invites}
6  seats={plan.seats}
7  onInvite={(emails, role) => api.team.invite(emails, role)}
8  onRoleChange={(id, role) => api.team.setRole(id, role)}
9  onRemove={(id) => api.team.remove(id)}
10/>

API reference

TeamMembers

A team page: who's in it, with their role and when they were last active, and the invitations still out. Invite several people at once with a role (seats count them), change a role in place, suspend, reactivate or remove someone, and resend, copy or revoke an invitation. The owner stays; you can't demote or remove yourself. Your team comes in as members and invites (a new list replaces what's shown), and every change goes to your handlers; one that throws is undone, with its message.

Prop	Type	Default
`workspace`	`string` The workspace, in "Who can sign in to …".	`"Northwind Studio"`
`members`	`TeamMember[]`	`sample`
`invites`	`TeamInvite[]`	`sample`
`seats`	`number` Seats on the plan: invitations hold one until they're accepted or revoked.	`10`
`inviteLink`	`(invite: TeamInvite) => string` An invitation's link, for "Copy link".	`sample`
`onInvite`	`(emails: string[], role: TeamInvite["role"]) => Promise<TeamInvite[] \| void> \| TeamInvite[] \| void` Invites people with a role; return the invitations made to show them (sample ones without it).	—
`onRoleChange`	`(id: TeamMember["id"], role: Exclude<TeamRole, "owner">) => Promise<void> \| void`	—
`onSuspend`	`(id: TeamMember["id"], suspended: boolean) => Promise<void> \| void`	—
`onRemove`	`(id: TeamMember["id"]) => Promise<void> \| void`	—
`onResend`	`(id: TeamInvite["id"]) => Promise<void> \| void` "Send a new link" for an invitation.	—
`onRevoke`	`(id: TeamInvite["id"]) => Promise<void> \| void`	—

type TeamRole

= "owner" | "admin" | "member"

type TeamMember

Prop	Type	Default
`id`	`number \| string`	—
`name`	`string`	—
`email`	`string`	—
`role`	`Role`	—
`active`	`string`	—
`suspended`	`boolean`	—
`you`	`boolean`	—
`src`	`string`	—

type TeamInvite

Prop	Type	Default
`id`	`number \| string`	—
`email`	`string`	—
`role`	`Exclude<Role, "owner">`	—
`sent`	`string`	—
`expired`	`boolean`	—