shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let people find the cheapest way to hire a tool with this equipment rental product card for Vue with Ark UI. A drawn rotary hammer sits above an "Hours needed" Number Input that takes 1 to 200 hours. Three rows beside it price the same job: by the hour at $12, by the day at $60 for up to 10 hours, and by the week at $240 for up to 50 hours. A day or a week is charged whole, so 30 hours is three days, $180, against $360 by the hour. The cheapest row gets a Badge that says "Best for 30 h", the others say how much more they cost, and a sentence names the saving, "$180 under hourly". The one Shine Button holds the tool at the best rate. Money is integer cents. Nothing is held or charged. For tool, bike, boat and camera hire.
FAQ
How do I change the rates?
Edit RATES. Each has cents and covers, the hours one charge covers, so a day that covers ten hours is covers: 10. The total is Math.ceil(hours / covers) * cents, and the best row is the lowest total.
What happens when two rates cost the same?
The first in the list wins, so the shorter hire is named. Reorder RATES if you would rather name the longer one.
What if someone types 0 or 500?
When the field loses focus the number is brought back to between 1 and 200 and shown that way. While typing, the rows already use the nearest valid number. Arabic-Indic digits are read too.
What stays local, and how do I wire it for real?
The hours, the rows and the hold are page state; nothing is held or charged. Replace the body of hold and release with calls to your booking service and send the hours and the rate id, then let the server price it again.
