An example panel of your own

// 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>      }    />  );}