ExamplePanel
A working example with its source - a title, a line about the example, and a switch between preview and code.
Example shows a working example next to its source, as on every page of this site: a header
with the title, a short description and a switch between Preview and Code, and a stage with the
example on the application background.
An outline buttonThe secondary action of a form.
<Button variant="outline">Save draft</Button>// apps/docs/examples/ui/example-panel.tsx'use client';
import {ExamplePanel} from '@workspace/active-ui/components/composed/example-panel';import {Button} from '@workspace/active-ui/components/primitives/button';import { CodeBlock, CodeBlockContent, CodeBlockLine,} from '@workspace/active-ui/components/primitives/code-block';import {useHighlightedCode} from '@workspace/active-ui/hooks/use-highlighted-code';
const SOURCE = `<Button variant="outline">Save draft</Button>`;
/** * An example panel of your own: a title, a line about the example, and a * switch between the running example and its source. Every example on this * site is shown in one. */export default function ExamplePanelExample() { const lines = useHighlightedCode(SOURCE, 'tsx'); return ( <ExamplePanel className="w-full max-w-xl" title="An outline button" description="The secondary action of a form." previewLabel="Preview" codeLabel="Code" viewLabel="View" preview={<Button variant="outline">Save draft</Button>} code={ <CodeBlock flush> <CodeBlockContent> {lines.map((line, index) => ( <CodeBlockLine key={index}>{line}</CodeBlockLine> ))} </CodeBlockContent> </CodeBlock> } /> );}What the composition adds#
The view switch is the panel's own:
linetabs in the header. Settings of the demo itself belong inside the preview.The stage is the application canvas (
--background), so a component looks as it does in an application. It centres a small example (stage="centered", the default). A wide one (a grid, a chart) takesstage="fill": the full width of the panel from its start, so a component that measures its container gets that width. What is wider still scrolls inside the stage.Actions of the panel (
actions) sit beside the view switch: a link to the example on its own page, or a FullScreen button with the panel as itstarget. In full screen the panel fills the screen and scrolls.The code stays mounted while the preview shows, so search and tests can read it.
A named figure: the panel is a
<figure>named by its title.
Usage#
import {ExamplePanel} from '@workspace/active-ui/components/composed/example-panel';
<ExamplePanel title="An outline button" previewLabel="Preview" codeLabel="Code" viewLabel="View" preview={<Button variant="outline">Save draft</Button>} code={<CodeBlock flush>…</CodeBlock>}/>;What your application provides#
The example and its source, usually a CodeBlock with
flush, highlighted withuseor on the server.Highlighted Code The labels of the tabs and the switch, translated.
Accessibility and keyboard#
The view switch is a tab list named by view: the arrow keys move between Preview and Code,
Enter or Space activates one.
API#
Import from @workspace/
Props
- Type
ReactNode
Its source, usually a Code with flush.
- Type
string
The label of the code tab, for example "Code".
- Type
ReactNode
The running example.
- Type
string
The label of the preview tab, for example "Preview".
- Type
ReactNode
The name of the example; also the accessible name of the panel.
- Type
string
The accessible name of the view switch, for example "View".
- Type
ReactNode
Controls of the panel beside the view switch, such as a link to the example on its own page or a full-screen button.
- Type
"code""preview"- Default
'preview'
The view shown first.
- Type
ReactNode
One short line about what the example is or proves.
- Type
"centered""fill"- Default
'centered'
centered (default) for a small example, fill for a wide one.
Other props, such as the standard attributes of the underlying element, className and ref, are passed through.
Types
A working example with its source: a header with the title, a short description of what the example is, and a choice between the preview and the code, as in a documentation site or a component lab.
Two kinds of controls stay apart. The view switch (Preview, Code) is the panel's own control and sits in its header, as line tabs. The settings of the demo itself (a language, a variant) belong to the demo and render inside the preview stage, with the ordinary controls of the demo.
The stage is the application canvas (--background), so a component looks as it does in an application, on the ground it was designed for. It centres its content; what is wider than the panel scrolls from its start.
The code is the caller's: usually a Code with flush (the panel is its frame), highlighted where the caller can read the source. It stays mounted while the preview shows, so a test or a search can read it.
The stage centres a small example (stage="centered", the default). A wide example (a grid, a chart, a dashboard) takes the full width of the panel from its start (stage="fill"); what is still wider scrolls inside it. In full screen (for example through Full with the panel as its target, placed in actions) the panel fills the screen and scrolls.
All text is the caller's: the panel translates nothing. preview, code and view are required for that reason.
The props of Example, each described in its prop list on this page.
interface ExamplePanelProps extends Omit<
React.ComponentProps<'figure'>,
'title' | 'children'
> {
title: React.ReactNode;
description?: React.ReactNode;
preview: React.ReactNode;
code: React.ReactNode;
previewLabel: string;
codeLabel: string;
viewLabel: string;
defaultView?: 'preview' | 'code';
actions?: React.ReactNode;
stage?: 'centered' | 'fill';
}