Designer Availability Composer Profile Block for React

Edit STATUSES for the labels and ENGAGEMENTS for the kinds of work, and set START to what is saved when the page loads. BOOKED_UNTIL is the last day of the current booking: when the status is Booked and no date is picked, the card says the next opening is the day after it. AS_OF is the day the page treats as today, so days up to it cannot be picked and nothing reads the clock. The card's words, the counts in the foot and the button are worked out from the choices, so nothing is typed twice.

Open shows "Taking projects now" and the button "Start a project". Booked shows the next opening, the picked day or the day after the booking, and the button "Join the waitlist". Not taking work shows "Not taking new work" (or "Back from" the picked day) and no button, only a dashed "No requests" placeholder. The card is a picture of what visitors see: the button on it does nothing, and a screen reader is told in words what visitors would see.

Save keeps the choices in the page and says "Saved in this demo. Nothing published." Discard puts back the last saved choices. Both buttons are always on screen and stay quiet when nothing has changed; pressing one then says "No changes to save." or "Nothing to discard." The foot counts the choices that differ from the saved ones ("2 changes not saved yet."). To make it real, send the draft to your own API in the submit handler and show its answer in the same line.

It opens a calendar from the button; days up to today cannot be picked. Clear empties the date and Discard puts back the saved one. After either, the calendar starts again with no day marked, while the button always shows the date that is in effect. When the calendar closes, focus returns to the button.

Every control is named: the status group and the engagement group by their headings, the date picker by "Next opening" with the date in its name, and Clear and Discard by their labels. The engagement group never turns the last item off. The status line is a polite live region present from the start. Dates and counts keep their order in a right-to-left layout. The status dot is never the only cue: the state is also a word.

The card comes first, with the status chip under the name and the button under the words, then the three bands of controls one under the other; the status segments wrap their words to two lines. The foot stays pinned to the bottom of the screen while the panel scrolls, so Save is always in reach, and settles at the panel's end from the medium breakpoint.