Diff

Apresentação

O componente Diff é responsável por exibir uma comparação visual entre dois elementos, permitindo que os usuários vejam as diferenças entre duas versões de conteúdo. É útil para comparar imagens, textos ou qualquer outro tipo de conteúdo lado a lado.

Quando usar

• Para comparar duas versões de uma imagem
• Para mostrar diferenças entre textos
• Para exibir antes/depois de alterações
• Para comparar layouts ou designs
• Para demonstrar mudanças em interfaces
• Para criar visualizações comparativas

Forma básica de uso

import { Diff } from 'eitri-luminus';

// Comparação básica
<Diff>
  <Diff.Item1>
    <img src="/versao1.jpg" alt="Versão 1" />
  </Diff.Item1>
  <Diff.Item2>
    <img src="/versao2.jpg" alt="Versão 2" />
  </Diff.Item2>
</Diff>

// Comparação com classes personalizadas
<Diff className="w-full h-96">
  <Diff.Item1 className="bg-base-200">
    <p>Versão original do texto</p>
  </Diff.Item1>
  <Diff.Item2 className="bg-base-300">
    <p>Versão modificada do texto</p>
  </Diff.Item2>
</Diff>

// Comparação de layouts
<Diff>
  <Diff.Item1>
    <div className="layout-antigo">Layout antigo</div>
  </Diff.Item1>
  <Diff.Item2>
    <div className="layout-novo">Layout novo</div>
  </Diff.Item2>
</Diff>

Propriedades

Diff

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

Diff.Item1

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

Diff.Item2

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

Heranças

O componente Diff 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 'diff' para estilização base
• Inclui um redimensionador para ajustar a visualização
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Recomenda-se usar para comparações visuais diretas
• O componente suporta qualquer tipo de conteúdo em ambos os lados
• Ideal para demonstrações de mudanças e comparações