# Code Block

A monospace block for commands and output, with a copy button.

Source page: https://sproutboat.com/ikada/components/code-block

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/code-block.json
```
Or from the package: `import { CodeBlock } from "@sproutboat/ikada";`
## Usage
```tsx
import { CodeBlock } from "@/components/ikada/code-block";

<CodeBlock
  label="Deploy command"
   code="sproutboat deploy robin --region eu-west --env production --message 'Ship the new checkout flow' --wait --timeout 300"
  
  
/>
```
## Examples
### Command
Copied as is. The label names the scroll region for screen readers and the copy button.
```tsx
<CodeBlock
  label="Deploy command"
  code="sproutboat deploy robin --region eu-west"
/>
```
### Scrolls sideways
Long lines scroll by default. The block is keyboard focusable so it can be read with the arrow keys.
```tsx
<CodeBlock
  label="Deploy command"
  code="sproutboat deploy robin --region eu-west --env production --message 'Ship the new checkout flow' --wait --timeout 300"
/>
```
### Wrapped

```tsx
<CodeBlock
  label="Deploy command"
  code="sproutboat deploy robin --region eu-west --env production --message 'Ship the new checkout flow' --wait --timeout 300"
  wrap
/>
```
### Output without a copy button

```tsx
<CodeBlock
  label="Deploy output"
  copyable={false}
  code={"✓ Built wren in 4.2s\n✓ Uploaded 3 files\n✓ Live at https://wren.sproutboat.app"}
/>
```
## Props
### CodeBlockProps
Also takes every prop of `Omit<ComponentProps<"div">, "children">`.
| Prop | Type | Description |
| --- | --- | --- |
| code | `string` | The text. It is shown as is and copied as is. |
| label | `string` | Names the block for screen readers, e.g. "Deploy command". Required. |
| wrap? | `boolean` | Wrap long lines instead of scrolling sideways. Default `false`. |
| copyable? | `boolean` | Hides the copy button. Default `true`. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/code-block.tsx