Header

Apresentação

O Header é um container horizontal simples para o topo de uma tela: distribui os elementos filhos nas extremidades, alinhados verticalmente ao centro, com espaçamento interno padrão.

Quando usar

• Para o cabeçalho de uma tela, com título ao centro e ações nas laterais
• Para barras com elementos alinhados nas extremidades
• Para agrupar botão de voltar, título e ações

Forma básica de uso

import { Header, Text, Button } from 'eitri-luminus';

<Header>
  <Button className="btn-ghost">Voltar</Button>
  <Text className="font-bold">Meus Pedidos</Text>
  <Button className="btn-ghost">Filtrar</Button>
</Header>

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo renderizado dentro do cabeçalho
className	string	Classes CSS adicionais
id	string	Identificador único do componente (padrão: eitri-header-component)

Heranças

O componente Header herda 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 layout aplicado é p-4 flex flex-row justify-between items-center; para outro alinhamento, sobrescreva por className
• Não é fixo no topo por padrão — use classes de posicionamento se esse for o comportamento desejado
• Apenas children, className e id são utilizados — demais estilos devem ser aplicados por className