shadcn.io is not affiliated with official shadcn/ui
Parking Finder Map Block for Svelte
Eight car parks on a drawn street map and a sortable table beside it: choose a stay of 1 to 8 hours and every lot is priced from its tariff, with free spaces as a meter and pins that read P and a count.
Installation
Overview
Help drivers choose where to leave the car, with this parking finder map for Svelte with Ark UI. Bayhold, a parking app, draws the invented town of Pellbrook as an SVG street map with a theatre as the destination and eight car parks as pills that read "P" and the free spaces, or "Full" when there are none. A Native Select sets the stay (1, 2, 4 or 8 hours) and every lot is priced from its tariff: the first hour, then each further hour, up to a daily cap. The table under the map is the other half of the same data, with the name, the distance from the theatre, the free spaces as a Progress meter and the price for the stay. Each column heading is a button that sorts the table, a second press flips the direction, and aria-sort says which column is sorted. Pressing a car park's name rings its pin, and pressing a pin rings its row. A polite status line speaks the new order once the controls settle. It's built from Native Select, Progress and Guides, with a CSS entrance only. For parking apps, event sites and city guides.
FAQ
How do I list my own car parks?
Edit LOT_LINES. Each line is an id, a name, a position in the drawing's 480 by 360 units, the number of spaces, the free spaces and three prices in cents: the first hour, each further hour and the daily cap. In your app fill the free spaces from your occupancy sensors and keep priceOf as the one place a price is worked out.
How is the price worked out?
The first hour's price plus each further hour at the hourly rate, never more than the cap, all in integer cents. A 4 hour stay at Cathedral Yard is $4.50 plus three hours at $2.50, which is $12.00, under its $18.00 cap. Prices are sample data, not quotes.
How does the sorting work with a keyboard?
Each column heading is a real button in the table's header, so Tab reaches it and Enter or Space sorts. The sorted column's cell carries aria-sort as ascending or descending, the others say none, and the sentence above the map says it in words. Name, distance and price start low to high; free spaces start with the most.
What does pressing a row or a pin do?
It marks the car park: the row is tinted with a bar at its start and the pin gets a ring. Pressing it again clears it. The pins are a shortcut for the pointer and are skipped by the Tab key because the table says the same things in text.