"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export type Role = "Owner" | "Admin" | "Member" | "Viewer"; export interface TeamMember { id: string; name: string; email: string; avatar?: string; role: Role; status: "active" | "invited" | "suspended"; /** Free text, e.g. "2h ago". */ lastActive?: string; twoFactor?: boolean; } export interface TeamMembersListProps { title?: string; members?: TeamMember[]; seats?: number; /** Id of the person viewing (cannot remove themselves). */ currentUserId?: string; onInvite?: (emails: string[], role: Role) => void; onRoleChange?: (id: string, role: Role) => void; onRemove?: (id: string) => void; theme?: "dark" | "light"; className?: string; } const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.62)", faint: "rgba(245,244,241,0.36)", card: "#121212", border: "rgba(255,255,255,0.09)", chip: "rgba(255,255,255,0.06)", row: "rgba(255,255,255,0.025)", input: "#0D0D0D", on: "#F5F4F1", onText: "#0A0A0A", green: "#4ADE80", amber: "#FBBF24", red: "#F87171", accent: "#FB923C", track: "rgba(255,255,255,0.08)", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.62)", faint: "rgba(10,10,10,0.4)", card: "#FFFFFF", border: "rgba(10,10,10,0.09)", chip: "rgba(10,10,10,0.05)", row: "rgba(10,10,10,0.02)", input: "#FAFAF8", on: "#0A0A0A", onText: "#FAFAF8", green: "#15803D", amber: "#B45309", red: "#DC2626", accent: "#EA580C", track: "rgba(10,10,10,0.07)", ring: "rgba(10,10,10,0.5)" }, }; const ROLES: Role[] = ["Owner", "Admin", "Member", "Viewer"]; const ROLE_HINT: Record = { Owner: "Full access, billing and deleting the workspace", Admin: "Manage members, settings and integrations", Member: "Create and edit projects", Viewer: "Read-only access" }; const DEFAULT_MEMBERS: TeamMember[] = [ { id: "m1", name: "Mara Okafor", email: "mara@nexora.io", avatar: "/demo/44.webp", role: "Owner", status: "active", lastActive: "Online", twoFactor: true }, { id: "m2", name: "Daniel Reyes", email: "daniel@nexora.io", avatar: "/demo/42.webp", role: "Admin", status: "active", lastActive: "12m ago", twoFactor: true }, { id: "m3", name: "Lena Brandt", email: "lena@nexora.io", avatar: "/demo/55.webp", role: "Member", status: "active", lastActive: "2h ago", twoFactor: false }, { id: "m4", name: "Tomás Ferreira", email: "tomas@nexora.io", avatar: "/demo/43.webp", role: "Member", status: "active", lastActive: "Yesterday", twoFactor: true }, { id: "m5", name: "Noor Haddad", email: "noor@nexora.io", avatar: "/demo/46.webp", role: "Viewer", status: "active", lastActive: "3d ago", twoFactor: false }, { id: "m6", name: "", email: "jonah@kestrel.dev", role: "Member", status: "invited", lastActive: "Invited 2d ago" }, { id: "m7", name: "Priya Nair", email: "priya@nexora.io", avatar: "/demo/41.webp", role: "Member", status: "suspended", lastActive: "Suspended", twoFactor: true }, ]; const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; export function TeamMembersList({ title = "Team members", members, seats = 10, currentUserId = "m1", onInvite, onRoleChange, onRemove, theme = "dark", className }: TeamMembersListProps) { const p = PALETTES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [list, setList] = React.useState(() => members ?? DEFAULT_MEMBERS); const [q, setQ] = React.useState(""); const [inviteOpen, setInviteOpen] = React.useState(false); const [chips, setChips] = React.useState([]); const [draft, setDraft] = React.useState(""); const [inviteRole, setInviteRole] = React.useState("Member"); const [confirm, setConfirm] = React.useState(null); const [toast, setToast] = React.useState(null); const [resent, setResent] = React.useState([]); const [newIds, setNewIds] = React.useState([]); const seq = React.useRef(0); const timer = React.useRef | null>(null); React.useEffect( () => () => { if (timer.current) clearTimeout(timer.current); }, [], ); const used = list.filter((m) => m.status !== "suspended").length; const free = seats - used; const owners = list.filter((m) => m.role === "Owner" && m.status === "active").length; const query = q.trim().toLowerCase(); const rows = list.filter((m) => !query || `${m.name} ${m.email} ${m.role}`.toLowerCase().includes(query)); const say = (t: string) => { setToast(t); if (timer.current) clearTimeout(timer.current); timer.current = setTimeout(() => setToast(null), 2400); }; const addChip = (raw: string) => { const parts = raw .split(/[\s,;]+/) .map((s) => s.trim().toLowerCase()) .filter(Boolean); if (!parts.length) return; setChips((c) => Array.from(new Set([...c, ...parts]))); setDraft(""); }; const valid = chips.filter((c) => EMAIL.test(c) && !list.some((m) => m.email === c)); const sendInvites = () => { const pending = draft.trim() ? Array.from(new Set([...chips, ...draft.split(/[\s,;]+/).map((s) => s.trim().toLowerCase()).filter(Boolean)])) : chips; const ok = pending.filter((c) => EMAIL.test(c) && !list.some((m) => m.email === c)).slice(0, Math.max(0, free)); if (!ok.length) return; const added: TeamMember[] = ok.map((email) => { seq.current += 1; return { id: `new-${seq.current}`, name: "", email, role: inviteRole, status: "invited", lastActive: "Invited just now" }; }); setList((l) => [...l, ...added]); setNewIds(added.map((a) => a.id)); onInvite?.(ok, inviteRole); setChips([]); setDraft(""); setInviteOpen(false); say(`${ok.length} ${ok.length === 1 ? "invite" : "invites"} sent`); }; const changeRole = (m: TeamMember, role: Role) => { setList((l) => l.map((x) => (x.id === m.id ? { ...x, role } : x))); onRoleChange?.(m.id, role); say(`${m.name || m.email} is now ${role === "Admin" ? "an" : "a"} ${role}`); }; const remove = (m: TeamMember) => { setList((l) => l.filter((x) => x.id !== m.id)); setConfirm(null); onRemove?.(m.id); say(m.status === "invited" ? "Invite revoked" : `${m.name} removed`); }; const focusInvite = React.useCallback((el: HTMLInputElement | null) => el?.focus({ preventScroll: true }), []); const focusCancel = React.useCallback((el: HTMLButtonElement | null) => el?.focus({ preventScroll: true }), []); const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const avatar = (m: TeamMember) => m.avatar ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( ); return (

{title}

{used} of {seats} seats

Search members setQ(e.target.value)} placeholder="Search" className={cn("h-9 w-full rounded-lg border pr-3 pl-8 text-[13px]", focus)} style={{ borderColor: p.border, background: "transparent", color: p.text, ...ring }} />

{inviteOpen && (

{ e.preventDefault(); sendInvites(); }} >

Email addresses

{chips.map((c) => { const bad = !EMAIL.test(c) || list.some((m) => m.email === c); return ( {c} ); })} (/[\s,;]$/.test(e.target.value) ? addChip(e.target.value) : setDraft(e.target.value))} onKeyDown={(e) => { if (e.key === "Enter" && draft.trim()) { e.preventDefault(); addChip(draft); } else if (e.key === "Backspace" && !draft && chips.length) setChips((c) => c.slice(0, -1)); }} onPaste={(e) => { e.preventDefault(); addChip(e.clipboardData.getData("text")); }} placeholder={chips.length ? "" : "name@company.com, another@company.com"} className="h-7 min-w-[160px] flex-1 border-0 bg-transparent px-1 text-[13px] outline-none" style={{ color: p.text }} />

{chips.length - valid.length ? `${chips.length - valid.length} address${chips.length - valid.length > 1 ? "es" : ""} will be skipped. ` : ""} {free > 0 ? `${free} seat${free > 1 ? "s" : ""} left.` : "No seats left. Add seats in billing."}

Role

)}

{rows.map((m) => { const me = m.id === currentUserId; const lastOwner = m.role === "Owner" && owners <= 1; return (

{avatar(m)}

{m.name || m.email} {me && ( You )} {m.twoFactor && ( 2FA on )}

{m.name ? m.email : m.status === "invited" ? "Invitation pending" : ""}

{m.lastActive}

Role for {m.name || m.email} {m.status === "invited" && ( )}

{confirm === m.id && ( )} ); })}

{rows.length === 0 && (

No members match “{q}”.

)}

{toast && ( {toast} )}

); } export default TeamMembersList;