shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show how a day price caps an hourly rate with this coworking product card for React with React Aria. A chart of ten bars draws what one to ten hours cost: the bars climb by the hourly rate, then stop at a dashed line, the day price, and a sentence under it says from which hour the cap applies. A Toggle Group picks Hot desk ($6 an hour, $28 a day), Dedicated desk ($7, $42) or Private office ($20, $70) and the chart redraws for it. A Slider sets the hours, the bars up to it turn solid, and the one Shine Button books the desk from 09:00 on Mon 12 Oct for that time. The price is the smaller of the hours times the rate and the day price, in integer cents. Nothing is booked or charged. For coworking, meeting rooms, studios and anything with an hourly price and a daily cap.
FAQ
How do I change the rates?
Edit DESKS. Each has rateCents and capCents, so $6 is 600. The price of a stay is Math.min(hours * rateCents, capCents), and the hour at which the cap starts is Math.ceil(capCents / rateCents).
Why does the chart rescale with the desk?
Each desk's chart is drawn a fifth taller than its own day price, so the dashed line sits at the same height and the climb is easy to read. The labels and the sentence give the real amounts.
What does a screen reader hear on the slider?
The hours and the price, for example "4 hours, $24". The chart itself is decorative and hidden, because the sentence under it says the same thing in words.
What stays local, and how do I wire it for real?
The desk, the hours and the booking are page state; nothing is booked or charged. Replace the body of book and cancel with calls to your booking service and send the desk and the hours, not the price.
