Day and Dusk Real Estate Gallery Block for React

Every picture is drawn from typed data and a dusk flag. With the flag on, the picture uses a darker ground, the kit lights the windows, fanlights, lamps and pendants, and a moon and stars replace the sun. The same room is drawn both ways, so with photographs you would keep a day and a dusk image per room and choose one in sceneOf's place.

Add an entry to ROOMS (an id, label, title, metres, a day and a dusk description) and write its picture: each room is a small function in the scene kit that returns the picture as paths. The toggle group takes more items; on a phone the labels shrink, so keep them to one short word.

The listing is typed once in LISTING (price, area, bedrooms, bathrooms). The price per square metre, the area in square feet and each room's area under the stage are calculated from it, so changing a number changes everywhere it is shown.

It marks the request as saved in this demo (the label changes and a polite line says so) and sends nothing. Connect it to your booking form in request.

Tab goes to the rooms, then the switch, then the button. In the rooms group the left and right arrow keys move between rooms and Enter or Space chooses one; Space flips the switch. A polite line announces the room and whether it is day or dusk.

The stage is a fixed 3:2 box, every picture fills it, and the fact rows are single lines, so changing a room or the time of day never changes the block's height.