Response Templates Reviews Block for React

Add a category to CATEGORIES and templates to TEMPLATES (each with a category, a title and a body), and the tab counts follow. Variables are names in double braces: to add one, give fillOf the name and the value it stands for, and list the name in KNOWN so a typo is told apart from a real variable. The library here is typed example text for a fictional shop.

The Select picks one of the typed reviews, and the preview cuts the template into plain runs and variables: each known variable is replaced by that review's first name or service and wrapped in mark, and an unknown one such as a misspelt name stays as typed, still marked, with a line under the preview saying how many aren't recognised. Copy puts the filled-in text, not the template, on the clipboard.

They stay with the template you edited, so switching to another and back keeps them; a reload starts afresh. Choosing a different review changes only the preview, never the Textarea. Nothing is saved or sent anywhere, and the page says so beside the Copy button.

Choosing a category opens its first template; pressing a row selects that template and marks it as pressed. An unseen copy of every category's list holds the height, so switching category never moves the page. The Tabs are vertical and controlled through value and onValueChange; the selected tab is marked data-active.

It uses the browser's clipboard, which needs a secure page (HTTPS or localhost) and, in some browsers, a click. When the clipboard refuses, the button says "Couldn't copy" through its live status instead of showing a check.

Yes. The tab column, the rows and the working side follow the page's direction. The template text and its preview are ordinary paragraphs, so they take the page's direction too, and counts are isolated so their digits keep their order.