shadcn.io is not affiliated with official shadcn/ui
Parking Finder Chat Block for Vue
A helper chat with a lots card that sorts four car parks by distance, price or free spaces in place and holds a space for one to three hours, then releases it.
Installation
Overview
Show a parking helper with this parking finder chat for Vue with Ark UI. A narrow window of fixed height holds the thread between you and Ravi Hallam of Bayfinder, a city parking app, and the log carries a lots card: four car parks, each with its distance, its price an hour, "12 of 40 free" as a Progress bar with the number and a status word (Open, Filling or Full) worked out from the count. A Toggle Group sorts the rows in place by Closest, Cheapest or Most free, and a Native Select with a button holds a space for one, two or three hours: the thread posts "Held until 11:41" and says nothing was booked, and "Release hold" lets it go. The quick answers above the composer ask about the closest and the cheapest lot. The composer's Shine Button is the only colored control. There is no map here; the map category has one.
FAQ
What stays in the page, and how do I make it real?
The lots, prices and free counts are typed samples, labelled as such on the card, and the hold changes only this block's state. Nothing is booked and no map or service is called. To wire it for real, load the lots from your parking service into LOTS, and call its hold endpoint in hold before the message is posted; the sort, the status word and the held-until time are computed from that data.
How is Open, Filling or Full decided?
From the count alone: a lot with none free is Full, fewer than ten is Filling, ten or more is Open. The bar and the numbers use the same two figures, and the status is a word, so it never relies on color. Change a count in LOTS and the word follows.
How does the sort work without moving anything else?
The three choices reorder the same four rows in place, so the card keeps its height and the thread does not jump. Ties break by distance. The line under the composer announces the new order, and the choice you made stays pressed.
What does Hold a space hold?
The first lot in the current order that is not full, for the hours you chose. The button names that lot before you press it, so "Cheapest" holds a different lot than "Closest". The hours choice is turned off while a hold is on, and the card shows "Held at Tanner's Yard until 11:41" under the list.
Is it usable with a keyboard and a screen reader?
Yes. The log is a focusable region announced as a log, the sort is a labelled group of toggle buttons, each lot is a heading, a bar named with its counts and a status word, and the hold line is plain text. Every message starts with a hidden name and time.