Verification Lookup Awards Block for React

Edit CREDENTIALS at the top of the file: each has a number, holder, award, programme, the day issued and the last day. The sample chips are made from the list, and the lookup matches a typed number after removing spaces and capitalising it, so lower case and stray spaces still match.

By comparing the record's last day with AS_OF, a fixed day. On or after it the record is Valid and shows the days to go; before it the record is Expired and shows how many days ago it ended. A number that is in no record is Not found. Set AS_OF yourself, or use your own check, in a real page.

No. The line under the field says so: it checks this page's four sample records and nothing is sent. To make it real, replace lookup with a request to your register and keep the three outcomes and the reserved-height panel.

The result panel is a polite live region that is on the page from load, so a screen reader hears the new outcome when you press Verify or pick a chip; focus stays on the control you used. An empty submit shows a message under the field and moves focus back to it. The status dot is a drawing; the word beside it says the state.

No. Every outcome is drawn once, unseen, in the same cell as the live panel, so the panel is always as tall as the tallest one and the block keeps its height at every width.

The parts stack: the header, the field, the chips (they wrap), then the result panel under a thin rule. The field and button share one row down to 320 pixels. In a right-to-left layout the split mirrors, while certificate numbers stay left to right.