Notification Centre Testimonials Block for React

Edit NOTES at the top of the file: each has a quote, the customer's name, role and initials, and a relative time. SEEN lists the ids that start out read; every other note starts unread, and the badge is worked from the list, so adjust the header sentence ("Five notes… three of them still unread") if you add or remove rows. FACTS holds the two figures under the header.

Each row has a check button, named "Mark as read" with the customer's name, which reports whether it is pressed; press Enter or Space on it to toggle that row. With a mouse or a finger you can press anywhere on the row, because the button stretches over it. The "Mark all as read" button at the top works the same way and keeps focus when it turns into "Restore unread".

Every row is a figure with the customer as its caption and the words as a blockquote, and an unread row starts with the word "Unread". The dot is decorative. After each change one polite status line says what happened, for example "Marked read: Lena Hoffmann. 2 new."

No. Read and unread live in the component's state and reset when the page reloads, which is why the button can restore them. To make a real inbox, load the notes from your own API and call it from toggle and toggleAll.

No. The badge and the button reserve the room of their longer text, and the unread dot only hides, so the rows and the window keep their size. The title bar wraps onto two lines on a very narrow phone.

The section fades up once on load using a CSS transition, which switches off with reduced motion. Marking a row read changes colour and weight only, with no movement, and the Shine Button's light fades in place instead of sweeping.