# Code

Código dentro de uma frase: nome de arquivo, comando de terminal, chave de um
JSON, nome de prop.

Não é `Kbd`. A sombra de tecla promete "aperte isto", e prometer errado custa
mais do que não prometer nada. O `Kbd` é para a combinação que a pessoa vai
digitar, e este é para o texto que ela vai ler ou copiar.

## Quando não usar

Para bloco (retorno de API, linha de log, trecho de configuração), use
`CodeBlock`, que rola sozinho. `Code` dentro de um parágrafo com uma linha
longa estica a página inteira.

## No React Native

Traduz, e ele vai dentro de um `Text`: `Abra o <Code>app.json</Code>` quebra linha junto com a frase que o cerca. **A rolagem horizontal que a fila prometia nunca foi deste lado:** barra de rolagem dentro de um parágrafo é armadilha para o dedo que rola a tela, e quem precisa dela é o `CodeBlock` (retorno de API, linha de log), que é outra peça e ainda não portou. O argumento é o inverso do daqui: lá quebrar um JSON no meio muda o que está escrito, e aqui quebrar um caminho longo no meio é o certo, porque a alternativa é esticar a tela inteira. O corpo da letra não é escrito: o `Text` aninhado herda o do texto de fora, que é o que o `0.9em` do web dizia. E `selectable` vem ligado, porque o toque longo é o gesto nativo para copiar. No Android quem seleciona é o `Text` de fora, e ali é ele que precisa carregar a prop.

## Importação

```tsx
import { Code } from '@rivocode/ui'
```

## Exemplos

### Código na frase

```tsx
import { Code, CodeBlock } from '@rivocode/ui'

export function InlineCode() {
  return (
    <p className="max-w-96 text-base text-fg-muted">
      Instale a skill com <Code>npx rivocode-ui skill</Code> e ela aparece em{' '}
      <Code>.claude/skills</Code>.
    </p>
  )
}
```

### Retorno da API

```tsx
import { Code, CodeBlock } from '@rivocode/ui'

const RETORNO = `{
  "numero": "4813",
  "situacao": "autorizada",
  "chave": "35240612345678000199550010000048131234567890"
}`

export function ApiResponse() {
  return (
    <div className="w-96">
      <CodeBlock title="POST /notas" lineNumbers copyable>
        {RETORNO}
      </CodeBlock>
    </div>
  )
}
```

## Props

Não tem prop própria. Repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Partes

O componente se monta com as peças abaixo. Todas vêm de `@rivocode/ui`.

### CodeBlock

Código em bloco: retorno de API, linha de log, trecho de configuração.

A rolagem é própria de propósito. JSON não quebra linha, e sem rolagem no
próprio bloco a linha longa empurra a largura da página, e o vazamento
horizontal só aparece no celular de quem usa, nunca no monitor de quem
escreveu.

Sem realce de sintaxe: destacar palavra-chave exige uma gramática por
linguagem, e isso é peso que toda tela paga pelo que poucas usam. Quem precisa
traz o seu e passa o resultado como filho.

`lineNumbers` numera à esquerda, para quem vai citar uma linha; o número fica
fora da seleção, senão copiar o bloco traz os números colados no código.
`copyable` põe o `Clipboard` no canto, com o próprio conteúdo do bloco.

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `copyable` | `boolean` |  | 0.5.0 | Poe o botao de copiar no canto, com o proprio conteudo do bloco. |
| `lineNumbers` | `boolean` |  | 0.5.0 | Numera as linhas a esquerda, para quem vai citar uma delas. |

## Ver também

- [EventCalendar](/componentes/event-calendar.md)
- [RelativeTime](/componentes/relative-time.md)
- [Timeline](/componentes/timeline.md)
- [Tracker](/componentes/tracker.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)