Team

import { TeamMemberList } from "@launchapp/design-system/blocks/team";const members = [  { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "active", avatarUrl: "" },  { id: "2", name: "Bob Smith", email: "bob@example.com", role: "Member", status: "active", avatarUrl: "" },];export default function Page() {  return (    <TeamMemberList      members={members}      onRemove={(id) => console.log("remove", id)}      onChangeRole={(id, role) => console.log(id, role)}    />  );}

import { InviteForm } from "@launchapp/design-system/blocks/team";export default function Page() {  return (    <InviteForm      roles={["admin", "member", "viewer"]}      onInvite={(email, role) => console.log("invite", email, role)}    />  );}

import { RoleSelector } from "@launchapp/design-system/blocks/team";const roles = [  { id: "admin", label: "Admin", description: "Full access to all resources" },  { id: "member", label: "Member", description: "Can view and edit assigned projects" },  { id: "viewer", label: "Viewer", description: "Read-only access" },];export default function Page() {  return (    <RoleSelector      roles={roles}      value="member"      onChange={(role) => console.log("role", role)}    />  );}

import { WorkspaceSwitcher } from "@launchapp/design-system/blocks/team";const workspaces = [  { id: "personal", name: "Personal", plan: "Free", avatarUrl: "" },  { id: "acme", name: "Acme Corp", plan: "Pro", avatarUrl: "" },];export default function Page() {  return (    <WorkspaceSwitcher      workspaces={workspaces}      currentWorkspaceId="acme"      onSwitch={(id) => console.log("switch to", id)}    />  );}

import { TeamMemberGrid } from "@launchapp/design-system/blocks/team";const members = [  { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "owner", status: "active", joinedAt: "2023-01-01", initials: "AJ" },  { id: "2", name: "Bob Smith", email: "bob@example.com", role: "admin", status: "active", joinedAt: "2023-02-01", initials: "BS" },  { id: "3", name: "Carol White", email: "carol@example.com", role: "member", status: "pending", joinedAt: "2024-01-01", initials: "CW" },];export default function Page() {  return (    <TeamMemberGrid      members={members}      currentUserId="1"      columns={3}      showInviteButton      onInvite={() => console.log("invite")}      onRemove={(m) => console.log("remove", m.id)}      onChangeRole={(m, role) => console.log("role", m.id, role)}    />  );}

import { TeamRoster } from "@launchapp/design-system/blocks/team";const members = [  { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "Engineering Lead", department: "Engineering", availability: "available", skills: ["React", "TypeScript"], initials: "AJ" },  { id: "2", name: "Bob Smith", email: "bob@example.com", role: "Senior Designer", department: "Design", availability: "busy", skills: ["Figma", "UX"], initials: "BS" },];export default function Page() {  return (    <TeamRoster      members={members}      view="grid"      showSkills      showDepartment      onMessage={(m) => console.log("message", m.id)}    />  );}

import { InviteMemberDialog } from "@launchapp/design-system/blocks/team";export default function Page() {  return (    <InviteMemberDialog      open={true}      onOpenChange={(open) => console.log("open change", open)}      defaultRole="member"      onInvite={(recipients) => console.log("invite", recipients)}    />  );}

import { RolePermissionMatrix } from "@launchapp/design-system/blocks/team";const roles = [  { id: "admin", name: "Admin", description: "Full access to all resources", color: "bg-red-500", permissions: { "content": ["view", "create", "edit", "delete"], "users": ["view", "invite", "manage"] } },  { id: "member", name: "Member", description: "Can view and edit assigned projects", color: "bg-blue-500", permissions: { "content": ["view", "create", "edit"], "users": ["view"] } },  { id: "viewer", name: "Viewer", description: "Read-only access", color: "bg-slate-500", permissions: { "content": ["view"], "users": ["view"] } },];const categories = [  { id: "content", label: "Content", permissions: [{ id: "content.view", label: "View" }, { id: "content.create", label: "Create" }, { id: "content.edit", label: "Edit" }, { id: "content.delete", label: "Delete" }] },  { id: "users", label: "Users", permissions: [{ id: "users.view", label: "View" }, { id: "users.invite", label: "Invite" }, { id: "users.manage", label: "Manage" }] },];export default function Page() {  return (    <RolePermissionMatrix      roles={roles}      permissionCategories={categories}      permissionMap={{ admin: ["content.view", "content.create", "content.edit", "content.delete", "users.view", "users.invite", "users.manage"], member: ["content.view", "content.create", "content.edit", "users.view"], viewer: ["content.view", "users.view"] }}      canManage      onPermissionChange={(roleId, permId, granted) => console.log("change", roleId, permId, granted)}    />  );}

import { RolePermissionsMatrix } from "@launchapp/design-system/blocks/team";const roles = [  { id: "admin", name: "Admin", color: "bg-red-500", permissionCount: 12, categoryBreakdown: { content: 4, users: 4, billing: 2, integrations: 2 }, highestPermission: "full" },  { id: "member", name: "Member", color: "bg-blue-500", permissionCount: 6, categoryBreakdown: { content: 3, users: 2, billing: 0, integrations: 1 }, highestPermission: "limited" },  { id: "viewer", name: "Viewer", color: "bg-slate-500", permissionCount: 3, categoryBreakdown: { content: 1, users: 1, billing: 1, integrations: 0 }, highestPermission: "limited" },];const permissions = [  { permissionId: "content.view", label: "View Content", category: "Content", level: "full" },  { permissionId: "content.edit", label: "Edit Content", category: "Content", level: "limited" },  { permissionId: "users.manage", label: "Manage Users", category: "Users", level: "full" },  { permissionId: "billing.view", label: "View Billing", category: "Billing", level: "limited" },];export default function Page() {  return (    <RolePermissionsMatrix      roles={roles}      permissions={permissions}      onExport={(format) => console.log("export", format)}      onRoleClick={(roleId) => console.log("role", roleId)}    />  );}

import { InviteForm } from "@launchapp/design-system/blocks/team";export default function Page() {  return (    <InviteForm      onSubmit={({ email, role }) => console.log("invite", email, role)}      onCancel={() => console.log("cancel")}    />  );}