shadcn.io is not affiliated with official shadcn/ui
Restaurant Chain Map Block for React Aria
A chain's outlets on a drawn street map with a menu-item toggle: outlets that still have the dish are solid pins, sold-out ones hollow, squares have a drive-through, and a card gives the chosen outlet's hours, stock, price and special.
Installation
Overview
Answer "where can I get it today" with this restaurant chain map for React with React Aria. Smokerow, a casual-dining chain, draws the invented town of Halsmere as an SVG street map with eight outlets as numbered pins. A Toggle Group of four dishes (Brisket plate, Smoked wings, Burnt ends, Pecan pie) carries the number of outlets that still have each one in stock; an outlet that does is a solid pin, one that has sold out is hollow with a dashed edge and says "Sold out" in the list, and a square pin has a drive-through where a circle does not. An inset card on the map, docked under it on a phone, names the chosen outlet, whether it is walk-in only, its hours worked out from a fixed time, how many portions of the dish are in stock with the price in dollars and cents, and the day's special. Below, a list holds the eight outlets with the same facts; on a phone it shows five and a button unfolds the rest. Pressing a pin or a row marks the outlet, and a polite status line speaks how many outlets have the dish once the choice settles. It's built from Toggle Group, Badge, Button and Guides, with a CSS entrance only. For restaurant chains, bakeries and any retailer with limited stock.
FAQ
How do I fill it with my outlets and stock?
Edit OUTLETS and ITEMS. Each outlet has a name, opening and closing times in minutes after midnight, a drive flag, a special line, an x and y in the drawing's 480 by 360 units and a stock array with one count per dish in the order of ITEMS. Each dish has a price in integer cents. In your app read the counts from your point-of-sale system when the dish changes and keep leftOf as the one place that reads them.
How is a sold-out outlet shown without colour?
By fill and edge: a pin that has the dish is solid, one that has sold out is hollow with a dashed border, and the list says "Sold out" in words. The shape is a separate channel: square for a drive-through, circle for walk-in only. Nothing relies on a hue.
Where do the hours come from?
From AS_OF, a fixed Monday evening in the file, compared with each outlet's times. They are never read from the clock, so the demo looks the same at any hour. In your app pass the visitor's current time and the outlet's time zone.
Can I use it without a mouse?
Yes. The dish group is toggle buttons reachable with Tab and operated with Space or Enter, and each outlet is a button in the list that marks it and fills the card. The pins are hidden from assistive technology and skipped by the Tab key because the list says the same things in text.
What stays local in the demo, and how do I wire it up?
All of it. The outlets, stock and prices are typed sample data and nothing is ordered, reserved or sent. In your app fetch stock per outlet when the dish changes and send an order from the card; the drive-through flag and the special can come from the same record.