// title: Team invite with per-row undo action "use client"; import { useState } from "react"; import { Button } from "@/registry/default/ui/button"; import { toastManager } from "@/registry/default/ui/toast"; const members = [ { email: "olivia@example.com", id: "olivia", initials: "OM", name: "Olivia Martin", role: "Editor", }, { email: "jackson@example.com", id: "jackson", initials: "JL", name: "Jackson Lee", role: "Viewer", }, { email: "isabella@example.com", id: "isabella", initials: "IN", name: "Isabella Nguyen", role: "Editor", }, ]; export function Pattern() { const [invited, setInvited] = useState>(new Set()); const invite = (member: (typeof members)[0]) => { setInvited((prev) => new Set(prev).add(member.id)); const id = toastManager.add({ actionProps: { children: "Undo", onClick: () => { toastManager.close(id); setInvited((prev) => { const next = new Set(prev); next.delete(member.id); return next; }); toastManager.add({ description: `${member.name}'s invite has been revoked.`, title: "Invite revoked", type: "info", }); }, }, description: `${member.email} will receive an email invite.`, timeout: 6000, title: `Invite sent to ${member.name}`, type: "success", }); }; return (

Invite team members

{members.map((m) => (

{m.initials}

{m.name} {m.role}

))}

); }