Email Preview Notification Block for React

Edit MENTION, DIGEST and SECURITY at the top of the file: each has a subject, a body (one paragraph per line), an optional quote, optional facts (a term and a value each), the action the drawn button says, a cadence for the badge and a footer. The digest's subject adds up its facts (totalOf), so "14 updates" is always the sum of the three lines under it. SAMPLE, SENDER and RECIPIENT name the made-up product and the people.

It narrows the email column from 36 rem to 22 rem so you can see how the same email wraps in a phone's inbox; it doesn't change the page's own layout, and on a real phone the column is as wide as the screen anyway. The switch only moves the column: the canvas keeps its height and scrolls inside.

Nothing is sent. "Send me a test" says "Test of the Security alert email queued in this demo. Nothing is sent." and that is all. To make it real, post the template id from sendTest to your server, which renders the same template with the signed-in person's address; a real email also needs inlined styles and links, which this drawing does not have.

Because a notification email that can't be traced to a setting gets reported as spam. The Mention and digest footers name the setting and where to change it; the Security alert says it is always sent, and has no switch to turn off, because it is the one you want even if you have turned the others off.

The drawn mail client is one figure with a name, the email is an article labelled by its subject, and the canvas is a named region you can scroll with the keyboard. The two toggle groups are named ("Template", "Width") and work with the arrow keys, and a polite status message says which template and width are showing. The drawn button is text only, since an email's button is not something to press here.

The toolbar scrolls sideways, so both toggle groups stay reachable without wrapping; the email fills the width of the canvas and the canvas scrolls inside its own height. The status line and Send me a test sit under it.