No Reviews Empty State Block for React

Nothing is sent: asking only marks the row "Requested in this demo", a reload clears it and Start over clears it without one. The three buyers and their purchase dates are typed sample data. To wire it for real, send the request from your server where the code says so, for example an email with a link to your review form, and mark the row from the response.

Each row's button asks that buyer, and the Ask all three button asks everyone not yet asked; its label follows the count, Ask all three, Ask the other two, Ask the last one and finally All three asked, when it stays in place but quiet. The three dashed markers under the stars turn solid one by one and the count reads "1 of 3 asked", "2 of 3 asked" and so on.

A shop with no reviews has no score, so the five stars are outlines on a line and nothing fills them. The real star rating belongs to the first review that arrives, not to this state.

Tab reaches Ask all three, Start over and each buyer's button, named for the buyer, such as "Request review from Imelda Vasko". A button that has asked stays focusable and its name becomes "Requested in this demo", so focus is never lost. The sentence under "No reviews yet" is a polite status line that says what was requested and that nothing was sent.

Each row keeps both lines of text and its button drops under them at the full width of the row, the same size before and after it is pressed, so the list never changes height. Nothing scrolls sideways, even at 320 px wide.