Peek Drawer Awards Block for React

Edit AWARDS at the top of the file. Each has a title, a programme, a fixed year, a citation (the peek shows its first two lines, the drawer and the open row show all of it), criteria, the number of entries, the judges and a mark, one of the five drawings at the top of the file. The count in the header comes from the list.

The block holds the open award's id in one piece of state, and each row's Collapsible is controlled by it: opening a row sets the id, which closes the row before it, and closing a row clears it. To let several stay open, keep a list of ids instead. Each Collapsible takes open and onOpenChange(next).

Yes. The peek is the whole citation with a two-line clamp and a fade applied in CSS, so assistive technology reads all of it; opening the row removes the clamp. Each handle is named "Details for" and the award, so five identical labels never confuse a list of buttons.

Yes: the facts stay in the page while the drawer is closed, hidden, so they are not read or reachable until it opens.

No. Cressida is a made-up document viewer, Opalhurst, Pickerwell, Quenbury, Saltmarrow and Heronsgill are made-up programmes, and the citations and numbers are written for the example. The trophies are drawn by the block.

The trophy, award and programme come first, then the peek, then the handle on its own line; the drawer's three facts stack. On a wide screen the three parts share one line with the handle at the end. In a right-to-left layout the order mirrors and the chevron stays a chevron, turning as the row opens.