Tattoo Piece Estimator Profile Block for React

Edit the constants at the top. RATE is the hourly rate and MINIMUM the least the studio charges. HOURS_PER_10CM is how long ten centimetres takes, SPREAD how far the range strays either side, and SESSION_HOURS the longest sitting. PLACEMENTS and STYLES each list a name and a factor that multiplies the hours; add a row to either and it appears in the menu or the group. Every figure on the card comes from these, so nothing is typed twice.

The size gives the base hours, two for every ten centimetres. That is multiplied by the place's factor and the style's factor to give the hours in all, which the block shows as a row of the sum. The range runs 15% either side of it, rounded to the half hour, and the prices are those hours at the hourly rate, never under the minimum charge. Sessions are the longer end of the range divided into sittings of at most four hours.

Nothing leaves the page. It says Requested in this demo, nothing was sent, in the status line beside the button, and the line clears as soon as you change the place, the size or the style, because the request no longer matches the piece. To make it real, send the three choices and the range to your own API in the form's submit handler and show its answer in the same status line.

No, and the block says so twice: in the estimate cell and in the foot. A tattoo's time depends on the design, the skin and the day, so the numbers are a range around a sum and the artist confirms both at the consult. Keep that sentence if you change the rates.

The menu has a visible label, the slider is named How big, longest side and reads its value as centimetres, and the style group is named by its heading. The price range is shown with an en dash and read out as "to". The sum is a description list, so each factor is read with its name, and the status line is a polite live region present from the start. Every control works from the keyboard. Here the slider is named by its label through aria-labelledby.

The estimate comes first, then the three choices and the sum, and the foot stays pinned to the bottom of the screen while the panel scrolls so the consult is always in reach. From the medium breakpoint the estimate sits in a cell at the start with a divider and a plus mark where it meets the band above. The figures keep their order in a right-to-left layout.