Analytics Snippet Modes

Shadcn UI Code Example Block

CodeExample16 is a compact hero plus code sample built with shadcn/ui, narrating a streaming analytics API and showing three integration styles. The text column stacks an uppercase eyebrow, large headline, paragraph, and button. Beneath, a code card spans the content width: the header shows the active filename on the left and mode controls on the right. Desktop users switch modes with small tabs; narrow viewports fall back to the code block’s built-in select. The body scrolls for long TypeScript samples.

All three snippets share the same fictional metrics client and dashboard id, so the story reads as one feature shown from server loader, client fetch hook, and React consumption angles. Visual weight stays on typography above and monospace content below. No extra chrome beyond the single primary button.

This is a focused teaching block: three strings of code and light state. It does not ship a clipboard control in this variant, so duplication is left to the browser or downstream tooling if you add it later.

The layout stays single-column end to end, which keeps scanning simple on phones and desktops alike.