Carpenter Wood Explorer Profile Block for React

Edit SPECIES (name, grain, finish, hardness in pounds-force and the price per board foot in cents) and PIECES (title, kind, year, hours and the species id it belongs to). The bars are a share of SCALE_END, the line under them, the hours in the list heading and the count are all worked out from the data, so nothing is typed twice. Keep at most three pieces per species, or add a line to LINES.

They are typed in the example as Janka-style figures: the force in pounds-force that presses a steel ball half its width into the wood. Use your supplier's published figures for your own species. The percentage in the line under the scale is worked out from them against the softest species, so it changes with the data.

Yes. The grain samples are drawn from a few strokes of the theme's greys so the block ships with no image files and follows the theme in light and dark. In your own app swap the Grain component for an image of each board at the same shape, and keep the names and the facts list beside it.

In the demo it only says in the status line that a quote was noted for the species on show and that nothing was sent. Wire it to a request form or a link to your own contact page, passing the species, and keep the status line for the result.

The species buttons are one group named Species, with a pressed state, and keep their order in a right-to-left layout. The hardness scale is a real list: each row says the species, whether it is chosen and the number, so the bars add nothing a screen reader would miss and are hidden from it. The drawn grain is a picture and is hidden too. The status line is a polite live region present from the start.

The species buttons scroll sideways, the scale rows keep their sample, name, bar and number on one line, and the board sits above its facts. The pieces list keeps its three ruled lines, so nothing moves when you choose a species.