shadcn.io is not affiliated with official shadcn/ui
Time Estimates Stepper Block for React Aria
A cook's prep list with an estimate on each of five steps, a Minutes it took field prefilled with the estimate, and a readout that derives how many minutes remain from how your finished steps ran.
Installation
Overview
Plan a job in minutes and learn from it with this time-estimate stepper for React with React Aria. A plus-marked frame opens on a readout: "About 80 min to go" in a large figure, "0 of 80 estimated min done" beside it and a total bar that fills as steps finish. Under it, the open step's panel sits at the start and a Steps rail of the five steps of a chicken traybake (Wash, Chop, Marinate, Cook and Plate) at the end, each with its estimate. A panel has a sentence of method, the estimate in a Data List and a "Minutes it took" Field that starts on the estimate. "Mark done" is the block's one Shine Button: it records the number you typed, so the rail reads "took 7 min", and moves on. The time to go is scaled by how your finished steps ran against their estimates, and the last step ends on a summary of the total against the plan. For recipes, runs, shifts and any job with a budget of minutes.
FAQ
How is the time to go worked out?
From the steps not yet done: their estimates added up, then scaled by paceOf, the minutes your finished steps took divided by their estimates. If the first step took twice as long as planned, the rest are expected to as well. Before anything is done the pace is 1, so it reads the plain total. The figure says "About" because it is a guess, and says "All done" at the end.
What does estimated min done mean?
The estimates of the steps you have recorded, out of the total of all five. It is deliberately the plan's minutes, not your actual ones, so the bar measures progress through the job and stays fair if you run slow. The actual minutes appear on the rail and in the closing summary.
What can I type in Minutes it took?
Whole minutes from 1 to 240. Anything else leaves the step open, names the rule under the field and in the status line, and keeps your text. The field starts on the estimate, so a step that went to plan is one press of Mark done. Returning to a finished step shows what you recorded, and Save time replaces it.
How does the keyboard work?
The rail is one tab stop on the current step; arrows move between the steps you have reached, Home and End jump to the ends, and Enter opens one. Tab goes on to the field and the buttons. Opening or finishing a step moves focus to its heading.