Achievement Notification Block for React

No. Which popover is open and whether the badge is cleared live in the page and reset on reload. The medals are typed in MEDALS with how much is done, how much is needed and the day each was earned; in your app fill them from your progress service and clear "New" when you record that the learner has seen it.

Earned medals are drawn with a solid outline and a tint, the day below. Medals in progress and locked ones are dashed, with "2 of 3" or "Locked" below. The state is also written in words in the button's name and in the popover, so no state depends on a line style alone.

Each medal is a button that opens a non-modal popover under it. Escape closes it and returns focus to the medal, opening another closes the first, and the popover keeps its size under reduced motion because its animation is switched off.

As one small SVG component: a ribbon, a circle and a glyph from a stroked path in a 24 by 24 box, all in the text colour. They are decoration, hidden from assistive technology, with the name and state in the button.

Every medal is a real button named like "Night Owl, 3 of 5", the grid is a labelled list, and the popover is reachable by keyboard. One polite status line answers Mark all seen, and the button stays focusable and readable once there is nothing left to mark.

Two medals across, four rows, with the status line and the earned count under the grid. The cells keep the same size whether or not the badge shows.