Inset Code Snippet Copy CTA Block for React

Edit LINES at the top of the file: one string per row, and the window and its buttons follow. Keep each line to one statement, since a row holds one line of code. Copy all joins the rows with line breaks, so what lands on the clipboard is exactly what the window shows, with no gutter or prompt in it.

Each button is our Copy Button with the row's text as its content. Pressing it writes that text to the clipboard, swaps the copy icon for a check for three seconds and sets a polite status that screen readers read as "Copied". When the clipboard refuses (a page not served over HTTPS), the icon turns into a cross and the status reads "Couldn't copy". The buttons are independent: copying one line doesn't change the others.

The row buttons are icon-only and each carries its own name, "Copy line 1", "Copy line 2" and "Copy line 3". The header button reads "Copy all three lines". The code in each row sits in a focusable region named after its line, so a keyboard can scroll a line that is wider than the window.

Yes. The panel has no forced scope: it is light on a light page and dark on a dark one, and its ring, shadow and the shell around it keep it set apart in both. Nothing in the block is a fixed colour, so a different theme repaints it, and the code's colours come from the theme as well.

The two halves stack, text first, so the Shine Button is on the first screen. The window keeps its size and the rows scroll sideways when a line is too wide, so a 320 pixel screen reads the same code without the page ever scrolling. Padding shrinks on small screens.

The shell fades up once on load, and the code's tokens fade in as the snippet scrolls into view, all in CSS. With reduced motion on, everything is simply there and the copy icon swaps without scaling.