Patent Steps Awards Block for React

Edit PATENTS at the top of the file. Each has a title, a register number, jurisdiction codes and dates: the days its steps were reached, in order, one to four of them. A patent with four dates is Granted; with fewer it is Pending and the next step shows "Awaiting". The header tally, the standing line and the steps all read that one list.

No. It is the Steps component used read only: it shows how far each patent has come and has no buttons to press. Each stepper is a labelled list with one item per step, and the date of a step is a real time element.

Change STEPS, the list of four names, and the dates in each patent follow the same order. Keep every patent's dates no longer than STEPS. The grid is four columns from sm; for another number of stages change sm:grid-cols-4 to match.

Outline badges with the two-letter code in a code element. They are plain text in a list named Jurisdictions, so a screen reader reads them as a list of codes; add a title or a legend if your readers do not know them.

No. The titles, the numbers and the register are made up, and nothing here is legal advice or a claim about any real application. If you list real patents, use the numbers from the patent office.

Each band stacks: the patent's details first, then its four steps as rows, each a marker beside the step's name and day. The connecting lines are hidden below sm. In a right-to-left layout the steps run right to left and the days keep their order.