Product Showcase Gallery Block for React

Add an entry to VIEWS (an id, a label, a description and a scene kind) and write the picture: each kind is a small function in the scene kit, and with photographs you replace Scene with an <img> per view. The rail takes any number of thumbnails; on a phone it scrolls sideways when they don't fit.

The finish's index is the drawing's seed, and the shoe's upper picks one of the kit's inks from it: dark for Graphite, middle for Stone, light for Bone. Every thumbnail and the stage redraw at once. With photographs you would keep one image per finish and angle, and swap them in sceneOf's place. The group always keeps one finish chosen, and the stock line and the label above it follow.

Tab goes to the rail, and the up and down arrow keys move through the angles (the rail is a vertical tab list, so left and right do nothing, even on a phone where the thumbnails sit in a row). Arrowing moves focus; press Enter or Space to choose the angle. The finishes are a toggle group of their own, with one finish always on, and a polite line announces the angle and finish.

It is a Shine Button that marks this finish as added (the label changes to "Added to your bag" and a polite line says so) and does nothing else: connect it to your cart in addToBag. Choosing another finish brings the original label back, because it's a different product.

The stage is a fixed 4:3 box and every angle fits in it, the rail has a fixed thumbnail size, and the stock line is one short row, so choosing an angle or a finish never changes the block's height.

The stage comes first, the four thumbnails sit in a row under it, and the product details follow under a rule. Nothing scrolls sideways at 320 pixels.