shadcn.io is not affiliated with official shadcn/ui
Tourist Attractions Day Planner Map Block for React Aria
Eleven attractions on a drawn harbour town, ticked into a plan with a numbered route, and an hours slider whose bar shows the time used against the limit and how far over it is.
Installation
Overview
See how much of a town fits in your day, with this tourist attractions planner for React with React Aria. Sightwick, a travel guide, draws eleven invented attractions on a harbour town, each with a visit time. Ticking attractions builds a plan: ticked places become numbered solid pins on a dashed route that starts at the hotel and follows the order of the list, and the walking time between stops is derived from the distance at 12 minutes a kilometre. A Slider sets the hours available from 3 to 10, and a Progress bar shows the time used, visits plus walking, with the limit marked on it. The sentence under it says "Fits with 7 min to spare" or "Over by 40 min" in words with an icon, never by colour alone. It's built from Slider, Progress and Guides, with a CSS entrance only. For travel guides, cruise stops, conference visitors and any plan under a time budget.
FAQ
How is the time used worked out?
Each attraction has a typed visit time in minutes. The plan is the ticked attractions in the order of the list, the walking is the sum of the legs from the hotel through each stop (drawing units over UNITS_PER_KM, times MINUTES_PER_KM, each leg rounded to a minute), and the time used is visits plus walking. The limit is the slider's hours times 60.
How do I use my own attractions?
Edit PLACES (a name, a kind, the visit time and a position in the drawing's 480 by 360 units) and HOTEL. Keep the list in a sensible walking order, since that is the order of the plan. In your app, replace the straight-line walk with a routing result.
Are the places and times real?
No. The town and its places are invented, the drawing is not to scale and the times are sample data, which the caption says. Opening hours and queues are not modelled.
Can I use it without a mouse?
Yes. Every attraction is a checkbox in the list, the slider takes the arrow keys and speaks its value in hours, and a polite message gives the stops, the time used and whether the plan fits once the controls settle. The pins on the map are a pointer shortcut hidden from assistive technology.