shadcn.io is not affiliated with official shadcn/ui
Food Truck Tracker Map Block for React
Five food trucks on a drawn street map that move to their pitch for lunch, afternoon and dinner, with a dashed trail from the last stop, a truck list and the chosen truck's four-dish menu with prices in dollars and cents.
Installation
Overview
Show where the trucks are at each point of the day with this food truck tracker map for React with Base UI. Grillwheel, a food-truck guide, draws the invented town of Marnholt as an SVG street map with six pitches and five trucks as lettered pins. A Toggle Group under the map (Lunch 12:00, Afternoon 15:00, Dinner 18:00) moves every truck to its typed pitch for that part of the day; the pins slide there and leave a faint dashed trail from where they stood before. A readout names the chosen truck, its pitch and when it packs up. A list of the five trucks, the way in for the keyboard, shows each one's cuisine and current pitch, and pressing a truck or its pin marks it and shows its four-dish menu in a table with prices in dollars and cents. The rota is for a fixed Monday and nothing reads the clock. A polite status line speaks the new place once the choice settles. On a phone the time toggles fill the width with 44 pixel targets. It's built from Toggle Group, Table and Guides, with a CSS entrance and a slide that reduced motion turns off. For street-food guides, festival apps and mobile vendors.
FAQ
How do I fill it with my trucks?
Edit TRUCKS, PITCHES and PERIODS. Each truck has a letter, a stops array with one pitch id per part of the day and a menu of name|cents lines; each pitch has an x and y in the drawing's 480 by 360 units. In your app load the rota from your scheduling service and keep stopOf, the one function that turns a truck and a time into a pitch.
What is the dashed line?
The straight line from the pitch the truck stood at in the previous part of the day to its current one, drawn only after lunch. The chosen truck's trail is a little heavier. It shows where it came from, not the route it drove, because the drawing has no road network.
Do the pins really slide, and what about reduced motion?
Yes: the pins move with a half-second CSS transition on their position. Under reduced motion the transition is off and they jump to the new pitch. Nothing loops.
Can I use it without a mouse?
Yes. The time of day is a group of toggle buttons, each truck is a button in the list, and the menu is a table. The pins are hidden from assistive technology and skipped by the Tab key because the list says the same things in text.