Stacked User Quote Banner Block for React

Edit POST at the top of the file: the name, the @handle, the initials, the text and the number of likes the post starts with. Keep the quote to two lines on a desktop; a post that needs more room is a testimonial and wants the other card. Only post what the person published, with their permission.

The button shows the starting count, POST.likes. A press adds one and the digits roll to the new number; the next press takes it back and they roll down. It does that by flipping the step between +1 and -1 and keeping the count between the two numbers. The button is a toggle (aria-pressed), the heart fills when it's on, and a polite status inside the button speaks the new count. It lives on the page only; to keep a like, send it to your server in onCountChange.

It's written for the reader's language with Intl.RelativeTimeFormat and a fixed three hours, so it can't go stale or differ between the server and the browser. In a real post, compute it from the post's date after the first render, or show the date. The time element carries a duration, so it stays valid.

The card sits at the end of the column (start means the right there), the handle and the quote sit in bdi, and the like button keeps its digits in order: the catalog's Counter Button mirrors its digits in right-to-left pages, so the button is set to dir="ltr".

The card takes the width of the page column, the quote wraps to three lines, and the foot row keeps the age and the like button on one line. Long names and handles are cut with an ellipsis. Nothing scrolls sideways at 320 pixels.