zidanecomponents/CodeFrame
import { … } from 'zidane-ui'ui/src/components/CodeFrame.tsx
const agent = createAgent({ ...basic, provider })
await agent.run({ prompt: 'build a REST API' })cat packages/server/src/handlers/very-long-folder-name/another-nested-directory/session-title-generator.ts | head -n 200 # a long line scrolls inside the frame
$ bun test 41 passed
Components#
CodeFrameComponent#
Renders code in its surface with a copy button revealed on hover. Without caption it
is the bare code panel; with caption it adds a tray with a header. The ref goes to the
outer element.
const CodeFrame: ForwardRefExoticComponent<CodeFrameProps & RefAttributes<HTMLDivElement>>Props
| Name | Type | Description |
|---|---|---|
| actions? | (buttonClass: string) => ReactNode | Extra controls before Wrap and Copy (a diagram's source toggle). Receives the class the frame's own buttons wear (revealed on hover, sized and backed for this form): put it on each control. |
| caption? | ReactNode | Header content. When set, the code sits in a tray under a header with the icon, this caption and the copy button, and a string caption also names the scroll group. Omit it for the bare code panel. |
| children | ReactNode | The code to show, such as highlighted HTML or a |
| className? | string | Extra classes on the outer element. |
| code | string | The plain text the copy button writes. |
| copyLabel? | string | Accessible name of the copy button. Defaults to the |
| icon? | string | Icon class before the caption. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| wrap? | boolean | Start with long lines wrapped. Defaults to the |
CodeWrapProviderComponent#
Sets whether code frames below start with long lines wrapped (each frame's toggle still flips its own).
function CodeWrapProvider(props: CodeWrapProviderProps): ElementParameters
| Name | Type | Description |
|---|---|---|
| props | CodeWrapProviderProps |
|
Returns
ElementProps
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The subtree it applies to. |
| wrap | boolean | Whether frames start wrapped. |
Interfaces#
CodeFramePropsInterface#
Props of CodeFrame.
interface CodeFramePropsProperties
| Name | Type | Description |
|---|---|---|
| actions? | (buttonClass: string) => ReactNode | Extra controls before Wrap and Copy (a diagram's source toggle). Receives the class the frame's own buttons wear (revealed on hover, sized and backed for this form): put it on each control. |
| caption? | ReactNode | Header content. When set, the code sits in a tray under a header with the icon, this caption and the copy button, and a string caption also names the scroll group. Omit it for the bare code panel. |
| children | ReactNode | The code to show, such as highlighted HTML or a |
| className? | string | Extra classes on the outer element. |
| code | string | The plain text the copy button writes. |
| copyLabel? | string | Accessible name of the copy button. Defaults to the |
| icon? | string | Icon class before the caption. |
| style? | CSSProperties | Inline styles on the root element, merged after the component's own. |
| wrap? | boolean | Start with long lines wrapped. Defaults to the |
CodeWrapProviderPropsInterface#
Props for CodeWrapProvider.
interface CodeWrapProviderPropsProperties
| Name | Type | Description |
|---|---|---|
| children | ReactNode | The subtree it applies to. |
| wrap | boolean | Whether frames start wrapped. |