Workspace Invite Notification Block for React

Edit INVITES: each has an id, the inviter and their initials, the workspace, the role (Editor or Viewer), the members count and an ISO at in UTC. HOME is the workspace you are in before you switch, and AS_OF is the page's fixed now, so a time reads "08:40 UTC" or "Yesterday 15:12 UTC".

All of it. Accept, Decline, Undo and Switch workspace change this page's state and say so ("Joined Tarrow Court as Editor in this demo"); no invitation is accepted, no request is sent and there is no mail link. In your app call your accept and decline endpoints from accept and decline, keep the two-step decline and keep Undo as a way back for as long as your endpoint allows it.

Each row has one cell holding the three states, the question, the decline confirmation and the receipt, stacked so the cell is as tall as the tallest and the inactive ones are unseen and out of the tab order. Answering swaps what shows without moving the next invitation, and focus moves to the control that took the place of the one you pressed.

Declining may be hard to take back in a real product, so the row asks "Decline the invite to this workspace?" in the same place, with "Keep it" first in the order. Pressing Decline invite leaves a receipt and an Undo; Keep it puts the question back. Nobody is told in this demo.

Each row stacks: the avatar and the sentence, the role and the facts under it, then the buttons. The question and the receipt sit above their buttons instead of beside them, and the status line is the same one line at the foot.

Buttons name their workspace ("Accept Tarrow Court"), Undo says what it undoes, the role is a glyph and a word, and the one polite status line reports each answer and the count. Hidden states are inert, so only the visible controls are in the tab order.