Floor Plan Coworking Contact Block for React

Nowhere yet. The submit handler waits 800 milliseconds as a stand-in for a request, then shows the confirmation. Replace that timer in submit with your own call (your bookings inbox, a CRM or a form endpoint): details holds the zone, the start date, the number of people, the name and the email. The confirmation only repeats what the visitor sent and promises no reply time.

Edit ZONES at the top of the file: each zone has a name, how many desks it has (total), how many are free (free), the fewest and most people one request may bring (min, max), a short note and place, where it sits over the plan from lg (start, top, width and height as percentages of the drawing). The squares are drawn from total and free, so they always match the words beside them. The figures in the demo are examples: read the real ones from your booking system and pass them in.

Both, and the control comes first. The four zones are one radio group named "Zone", so arrow keys move between them and a screen reader hears "Hot desks, 6 of 20 free". The walls, the door and the desks are an inline drawing that is hidden from assistive technology, and the chosen zone is marked with a foreground ring and a filled radio, never the primary colour. The drawing is greyscale and has no photo.

Any day from today on except Sundays. The picker's isDateUnavailable reads the clock when the calendar opens, so it never shows a stale month, and the visitor can also type a date. To change the rule (closed on Mondays, or a lead time of a week), edit closed. The picked date is kept as year-month-day and written out in full in the confirmation. The date picker brings its own Ark UI calendar, so it installs without replacing this library's Calendar.

The form has noValidate, so the block shows its own messages. On submit, problems checks that a zone is chosen, a start date is set, the number of people fits the zone, and the name and email are filled in (the email needs an @ and a domain). Each problem appears under its field with an icon, the control gets aria-invalid and an aria-describedby, and focus moves to the first one, which can be the first zone. Choosing a zone or typing in a field clears its message.

Below lg the split stacks: the header, then the four zones as a 2 by 2 list of cards (the desk squares are left out), then the form, so the form starts well within the first screen and a half. The floor drawing only shows from lg, where each zone is laid over its place on it. Name and email go one per row below sm, the submit button goes full width, and nothing scrolls sideways at 320 pixels. The header and the form fade up once on load; with reduced motion they simply appear.