shadcn.io is not affiliated with official shadcn/ui
Event Venue Finder Map Block for React Aria
A venue finder shown with its request dialog open in place over the map: seven venues sized by capacity, a list under the map, and a form with a date, a guest count that refuses more than the venue holds and a note.
Installation
Overview
Let people ask a venue for a date from the map they chose it on, with this event venue finder map for React with React Aria. Hirehall, a venue booking site, draws seven halls, barns and rooms around the invented harbour town of Pellsea as circles on an SVG street map, sized by how many people each holds; a dashed circle is too small for the 120 guests in the header. A list under the map names each venue with its capacity and day hire price, is the keyboard route, and marks a row whose request was saved. The header's Request this venue opens a Dialog with a date Select of three Saturdays, a guests Number Input that says in words when the count is more than the venue holds, and a note Textarea; its one Shine Button is Send request. For preview the dialog is drawn open in place over the map when the page loads; the header button opens the real Dialog with the same fields and state, and focus returns to it when it closes. For venue, studio and meeting-room booking sites.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the map: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page keeps working. The Request this venue button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same RequestFields component and share the block's state. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element, and the Escape effect.
How is the guest count checked?
problemOf compares the count with the chosen venue's capacity as you type and says it in words, for example that the venue holds 90 people and to enter 90 or fewer. Pick a small venue and open the dialog and the 120 guests already read as a problem. Send request refuses while there is one and puts focus back in the field. React Aria's number field commits a typed value on Enter or when you leave the field, so the message follows the value then, not on every keystroke.
What does Send request do?
It saves the request in the tab: the venue's row says Request saved with the guests and the date, the dialog closes, and a polite message says "Saved in this demo" and that nothing was sent. Sending another request for the same venue replaces the first.
Can I use it without a mouse?
Yes. The list rows are toggle buttons that choose the venue, and the circles on the map are a pointer shortcut hidden from assistive technology. The real dialog is named by its title, starts focus on the date field, traps focus, and Escape, Cancel and the close button return focus to the header button. The copy on load moves no focus; Escape inside it closes it and focuses the button.