Phone

Apresentação

O Phone é um componente de mockup: desenha a moldura de um celular ao redor do conteúdo informado. Serve para apresentação visual de telas, não para simular o comportamento do dispositivo.

Quando usar

• Para apresentar telas de um aplicativo em materiais de demonstração
• Para exibir capturas de tela dentro de uma moldura de celular
• Para protótipos e catálogos de telas

Forma básica de uso

import { Phone, Text } from 'eitri-luminus';

// Moldura simples
<Phone>
  <Text>Conteúdo da tela</Text>
</Phone>

// Com área de conteúdo em proporção de celular
<Phone>
  <Phone.Content className="bg-base-100 flex items-center justify-center">
    <Text>Conteúdo da tela</Text>
  </Phone.Content>
</Phone>

Subcomponentes

Subcomponente	Descrição
Phone.Content	Área interna com proporção de tela de celular (artboard artboard-demo phone-1)

Propriedades

Propriedade	Tipo	Descrição
children	ReactNode	Conteúdo renderizado dentro da moldura
className	string	Classes CSS adicionais
id	string	Identificador único do componente

Phone.Content aceita as mesmas propriedades.

Heranças

O componente Phone 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

• A moldura é puramente visual: não há StatusBar, navegação ou qualquer comportamento de dispositivo
• Apenas children, className e id são utilizados — demais estilos devem ser aplicados por className
• Phone.Content é opcional; sem ele o conteúdo ocupa a área de display sem proporção definida