Code

Apresentação

O componente Code é responsável por exibir blocos de código na interface, oferecendo uma formatação adequada para snippets de código, comandos e exemplos de programação. O componente suporta prefixos personalizados e formatação específica para código.

Quando usar

• Para exibir snippets de código
• Para mostrar exemplos de comandos
• Para apresentar trechos de código em documentação
• Para exibir logs ou saídas de console
• Para criar blocos de código formatados
• Para mostrar exemplos de programação

Forma básica de uso

import { Code } from 'eitri-luminus';

// Bloco de código básico
<Code>
  <Code.Content>
    const message = "Hello, World!";
    console.log(message);
  </Code.Content>
</Code>

// Bloco de código com prefixo personalizado
<Code>
  <Code.Content dataPrefix=">">
    npm install eitri-luminus
  </Code.Content>
</Code>

// Bloco de código com classes personalizadas
<Code className="bg-base-200">
  <Code.Content className="text-primary">
    // Seu código aqui
  </Code.Content>
</Code>

Propriedades

Code

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o container
id	string	Identificador único do componente

Code.Content

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o conteúdo
id	string	Identificador único do componente
dataPrefix	string	Prefixo a ser exibido antes do código

Heranças

O componente Code e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente usa a classe 'mockup-code' para estilização base
• O prefixo padrão é '$', mas pode ser personalizado
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Recomenda-se usar para trechos de código curtos e médios
• O componente preserva a formatação e indentação do código
• Ideal para documentação técnica e exemplos de código