Team

Teammitglieder und Einladungen für die Workspace-Einstellungen eines KI-Produkts. Eine Seat-Anzeige, die die Einladungen in der Vorschau zeigt, die du gerade tippst, ein Einladungsfeld, das eine eingefügte Liste in geprüfte Chips verwandelt, Mitglieder mit Rollen, Suche, Filtern und Sortierung, ausstehende Einladungen mit Cooldown fürs erneute Senden und kopierbaren Links, Eigentümerwechsel mit getippter Bestätigung und Entfernen mit Rückgängig.

Open in new tab

Überblick

Jedes KI-Produkt mit Workspaces landet bei derselben Seite: wer im Team ist, was jede Person darf, wer eingeladen wurde und wie viele Seats übrig sind. Team ist diese Seite als eine Komponente, die du in einen Settings-Bereich setzt. Sie liest deine Mitglieder, Einladungen und Seat-Anzahl und ruft deine Handler auf, wenn jemand handelt. Sie ändert die Daten nie von selbst, sodass das, was sie zeigt, immer das ist, was dein Server sagt.

Das Einladungsfeld nimmt Adressen so, wie Leute sie tatsächlich haben. Tippe und drücke Komma, Leertaste oder Enter, oder füge eine Spalte aus einer Tabelle, eine An:-Zeile aus einer E-Mail oder eine Liste mit Namen wie Ana Lima <[email protected]> ein. Jede Adresse wird zu einem Chip. Duplikate werden verworfen, Wörter, die keine Adressen sind, werden beim Einfügen übersprungen, und Chips für ungültige Adressen, bestehende Mitglieder und Leute, die bereits eine Einladung haben, werden mit dem Grund markiert, dazu ein Button, um sie alle auf einmal zu entfernen. Wähle die Rolle, füge optional eine Notiz hinzu und sende.

Die Seat-Anzeige zeigt Mitglieder, ausstehende Einladungen und die Chips, die du gerade tippst, als drei Ebenen, sodass du die Kosten einer Einladung siehst, bevor du sie sendest. Abgelaufene Einladungen belegen keinen Seat. Würden die Einladungen das Limit überschreiten, wird das Senden blockiert und gesagt, wie viele zu entfernen sind, und am Limit wird die Anzeige zu einem Add-seats-Call-to-Action.

Jede Mitgliederzeile hat die Rolle der Person als Menü mit dem, was jede Rolle darf. Die Leitplanken sind eingebaut: Der einzige Eigentümer kann sich nicht selbst herabstufen oder gehen, bis er das Eigentum überträgt, und die Menüs sagen das, statt die Option stillschweigend zu verbergen. Admins können Eigentümer nicht anfassen. Jemanden zum Eigentümer zu machen oder die eigene Rolle zu senken, fragt zuerst nach. Das Übertragen des Eigentums verlangt, die E-Mail des neuen Eigentümers zu tippen, sodass nie die falsche Ana die Schlüssel bekommt.

Ausstehende Einladungen zeigen, wann sie gesendet wurden, wann sie bald ablaufen und wann sie abgelaufen sind. Resend erneuert den Link und startet eine Wartezeit, gezählt ab dem letzten Senden, sodass der Countdown einen Reload überlebt. Copy invite link legt den echten Link in die Zwischenablage. Das Entfernen eines Mitglieds fragt einmal nach und bietet dann Undo an, und der Fokus springt zur nächsten Person, statt an den Seitenanfang zu fallen.

Installation

Die Pro-Registry zu components.json hinzufügen

components.json

{
  "registries": {
    "@hextaui-pro": {
      "url": "https://hextaui.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${HEXTAUI_PRO_TOKEN}"
      }
    }
  }
}

Token hinzufügen
Erstelle auf deiner Kontoseite einen Token und trage ihn in .env.local als HEXTAUI_PRO_TOKEN ein.

Den Block hinzufügen

pnpm dlx shadcn@latest add @hextaui-pro/team

Verwendung

An deine API anbinden

TeamSettings ist kontrolliert: Übergib members, invites und seats und aktualisiere sie in jedem Handler. Gib { email: message } aus onInvite zurück, um die Adressen zu behalten, die dein Server abgelehnt hat, mit dem Grund an jedem Chip.

"use client"

import * as React from "react"

import { SettingsSection, SettingsShell } from "../settings/settings"
import { TeamSettings, type TeamInvite, type TeamMember } from "@/components/blocks/team/team"

type Team = { seats: number; members: TeamMember[]; invites: TeamInvite[] }

async function call<Result = void>(path: string, init?: RequestInit) {
  const response = await fetch(path, {
    ...init,
    headers: { "content-type": "application/json" },
  })
  if (!response.ok) throw new Error((await response.text()) || "Try again in a moment.")
  return (response.status === 204 ? undefined : await response.json()) as Result
}

export function TeamPage({ team: initial, userId }: { team: Team; userId: string }) {
  const [team, setTeam] = React.useState(initial)
  const reload = async () => setTeam(await call<Team>("/api/team"))

  return (
    <SettingsShell sections={[{ id: "team", label: "Members" }]} className="h-svh">
      <SettingsSection id="team">
        <TeamSettings
          members={team.members}
          invites={team.invites}
          seats={team.seats}
          currentUserId={userId}
          onInvite={async (request) => {
            const { errors } = await call<{ errors: Record<string, string> }>("/api/team/invites", {
              method: "POST",
              body: JSON.stringify(request),
            })
            await reload()
            return errors
          }}
          onRoleChange={async (id, role) => {
            await call(`/api/team/members/${id}`, { method: "PATCH", body: JSON.stringify({ role }) })
            await reload()
          }}
          onRemove={async (id) => {
            await call(`/api/team/members/${id}`, { method: "DELETE" })
            await reload()
          }}
          onResend={async (id) => {
            await call(`/api/team/invites/${id}/resend`, { method: "POST" })
            await reload()
          }}
          onRevoke={async (id) => {
            await call(`/api/team/invites/${id}`, { method: "DELETE" })
            await reload()
          }}
          upgradeHref="/billing?add=seats"
        />
      </SettingsSection>
    </SettingsShell>
  )
}

Nur das, was du erlaubst

Jede Aktion erscheint nur, wenn ihr Handler gesetzt ist, und nur für Leute, die sie ausführen dürfen. Ohne onInvite gibt es kein Einladungsfeld, und Mitglieder und Betrachter sehen die Liste ohne Menüs.

"use client"

import { TeamSettings, type TeamMember } from "@/components/blocks/team/team"

const members: TeamMember[] = [
  { id: "u1", name: "Mia Chen", email: "[email protected]", role: "owner", lastActiveAt: Date.now() },
  { id: "u2", name: "Jonas Weber", email: "[email protected]", role: "admin", lastActiveAt: null },
]

export function ReadOnlyTeam({ userId }: { userId: string }) {
  return <TeamSettings members={members} currentUserId={userId} seats={5} />
}

export function OwnerTeam({ userId }: { userId: string }) {
  return (
    <TeamSettings
      members={members}
      currentUserId={userId}
      seats={5}
      onRoleChange={async () => {}}
      onRemove={async () => {}}
      onTransferOwnership={async (id) => {
        await fetch(`/api/team/owner`, { method: "PUT", body: JSON.stringify({ id }) })
      }}
    />
  )
}

Eine Entfernung rückgängig machen

Übergib onRestore, und der Toast nach einer Entfernung erhält einen Undo-Button, der dir das entfernte Mitglied zum Wiederhinzufügen übergibt.

"use client"

import * as React from "react"

import { TeamSettings, type TeamMember } from "@/components/blocks/team/team"

export function TeamWithUndo({ initial, userId }: { initial: TeamMember[]; userId: string }) {
  const [members, setMembers] = React.useState(initial)

  return (
    <TeamSettings
      members={members}
      currentUserId={userId}
      onRemove={async (id) => {
        await fetch(`/api/team/members/${id}`, { method: "DELETE" })
        setMembers((current) => current.filter((member) => member.id !== id))
      }}
      onRestore={async (member) => {
        await fetch(`/api/team/members`, { method: "POST", body: JSON.stringify(member) })
        setMembers((current) => [...current, member])
      }}
    />
  )
}

Aufbau

Die Teile, die du zusammensetzt, von außen nach innen.

Part	Beschreibung
`TeamSettings`	Die ganze Seite: Seats, das Einladungsfeld, ausstehende Einladungen, Mitglieder und die optionale Domain-Auto-Join-Zeile. Platziere sie in einer SettingsSection.
`parseEmailList`	Der Parser hinter dem Einladungsfeld. Zerlegt eingefügten oder getippten Text in kleingeschriebene Adressen, löst die Formen Name <email> und mailto: auf und überspringt beim Einfügen Wörter, die keine Adressen sind.
`teamRoles`	Die vier Rollen mit ihren Labels und Beschreibungen, geordnet vom meisten zum geringsten Zugriff.

API-Referenz

TeamSettings

Prop	Typ	Standard
`members`{ id, name, email, role, avatarUrl?, lastActiveAt?, joinedAt? }. lastActiveAt null zeigt Not yet active.	`TeamMember[]`	`–`
`invites`{ id, email, role, sentAt, expiresAt, link? }. Zeiten akzeptieren ein Date, einen ISO-String oder Millisekunden. link aktiviert Copy invite link.	`TeamInvite[]`	`[]`
`currentUserId`Das angemeldete Mitglied. Seine Rolle entscheidet, welche Aktionen erscheinen.	`string`	`–`
`seats`Seats im Plan. Mitglieder und nicht abgelaufene Einladungen verbrauchen je einen. Lass es für unbegrenzte Seats weg.	`number`	`–`
`domain`Zeigt eine Zeile, über die Leute mit einer verifizierten Firmen-E-Mail ohne Einladung beitreten können.	`{ name, verified, autoJoin, role? }`	`–`
`resendCooldown`Sekunden nach dem Senden einer Einladung, bevor sie erneut gesendet werden kann.	`number`	`60`
`pageSize`Wie viele Mitglieder vor Show more angezeigt werden.	`number`	`50`
`onInvite`Fügt das Einladungsfeld hinzu. Gib Meldungen nach E-Mail für Adressen zurück, die dein Server abgelehnt hat; sie bleiben mit der Meldung als Chips. Wirf einen Fehler, um alle Chips zu behalten und den Fehler am Button zu zeigen.	`({ emails, role, note }) => void \| { [email]: message } \| Promise`	`–`
`onRoleChange`Fügt das Rollenmenü hinzu. Die Zeile zeigt einen Spinner, bis es aufgelöst ist, und einen Toast, wenn es einen Fehler wirft.	`(memberId, role) => void \| Promise`	`–`
`onRemove`Fügt Remove from team hinzu, und Leave team in deiner eigenen Zeile. Wirft es einen Fehler, bleibt der Dialog mit der Meldung offen.	`(memberId) => void \| Promise`	`–`
`onRestore`Fügt dem Toast nach einer Entfernung Undo hinzu, mit dem Mitglied, wie es war.	`(member) => void \| Promise`	`–`
`onTransferOwnership`Fügt Transfer ownership für Eigentümer hinzu, bestätigt durch Tippen der E-Mail des neuen Eigentümers.	`(memberId) => void \| Promise`	`–`
`onResend`Fügt Resend hinzu. Aktualisiere sentAt und expiresAt, damit die Wartezeit beginnt und der Link erneuert wird.	`(inviteId) => void \| Promise`	`–`
`onRevoke`Fügt Revoke invite hinzu.	`(inviteId) => void \| Promise`	`–`
`onAutoJoinChange`Lässt den Domain-Switch funktionieren. Er wackelt und bleibt stehen, wenn das einen Fehler wirft.	`(enabled) => void \| Promise`	`–`
`onUpgrade`Fügt einen Add-seats-Button hinzu, der zur Hauptaktion wird, wenn jeder Seat vergeben ist.	`() => void`	`–`
`upgradeHref`Macht Add seats stattdessen zu einem Link.	`string`	`–`
`className`Klassen für den Wrapper, eine Spalte aus Gruppen.	`string`	`–`

parseEmailList

Gibt { emails, skipped } zurück.

Prop	Typ	Standard
`text`Alles mit Adressen darin, getrennt durch Kommas, Semikolons, Leerzeichen, Tabs oder Zeilenumbrüche.	`string`	`–`
`options.paste`Überspringt Wörter ohne @, wenn mindestens eine Adresse vorhanden ist, und zählt sie in skipped.	`boolean`	`false`

Tastatur

Taste	Aktion
`Enter`	Macht im Einladungsfeld aus dem Getippten einen Chip. Drücke es in einem leeren Feld erneut, um zu senden.
`,`	Macht auch aus dem Getippten einen Chip, ebenso Leertaste und Semikolon.
`Backspace`	Springt in einem leeren Einladungsfeld zum letzten Chip. Rücktaste oder Entf entfernt ihn dort und springt zum davor.
`⌘Enter`	Sendet die Einladungen aus dem Adressfeld oder der Notiz. Strg+Enter unter Windows und Linux.
`Escape`	Leert die Mitgliedersuche oder schließt ein offenes Menü oder einen Dialog.

Barrierefreiheit

Mitgliederzeilen sind Listeneinträge, benannt nach der Person. Rollenmenüs heißen etwa „Admin, change role for Ana Lima“ und der Mehr-Button etwa „More actions for Ana Lima“.
Chips, die nicht gesendet werden können, tragen ihren Grund in ihrem Namen, und die Liste der Probleme unter dem Feld ist als Beschreibung mit dem Input verbunden.
Hinzufügen von Adressen, Senden, Rollenänderungen und Entfernungen werden höflich in einer Live-Region angesagt. Fehler in Dialogen werden als Alerts angesagt.
Deaktivierte Aktionen erklären sich selbst: Das Rollenmenü und das Mehr-Menü sagen, warum der einzige Eigentümer seine Rolle nicht ändern oder nicht gehen kann, und Resend bleibt während der Wartezeit fokussierbar, mit der verbleibenden Zeit in seinem Namen.
Nach einer Entfernung springt der Fokus zu den Aktionen des nächsten Mitglieds, oder am Listenende zum vorherigen. Das Widerrufen einer Einladung tut dasselbe für Einladungen.
Die Seat-Anzeige ist ein Meter mit Label und der Anzahl als Text. Bei reduzierter Bewegung ändert sie sich ohne Gleiten.

Gebaut mit

Die kostenlosen HextaUI-Komponenten, aus denen Team besteht. Jede lässt sich einzeln installieren.

Code

3 Dateien, hinzugefügt zu components/blocks/team.