MetadataViewer
Exibe um objeto de metadados customizados como lista chave/valor, em card ou em diálogo.
Carregando...
Instalação
npx @kobana/ui add metadata-viewerDependências instaladas automaticamente: card, dialog, button (shadcn/ui), lucide-react
Importação
import {
MetadataViewer,
MetadataModalButton,
} from "@/components/kobana/metadata-viewer"Componentes
O pacote exporta dois componentes que compartilham a mesma renderização de chave/valor:
MetadataViewer— renderiza os metadados como uma lista organizada dentro de um card. Ideal para abas e painéis de detalhe.MetadataModalButton— botão de ícone (Info) que abre um diálogo exibindo os mesmos metadados. Ideal para tabelas e cabeçalhos compactos.
Props
MetadataViewer
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
data | Record<string, unknown> | — | Objeto de metadados a ser exibido como lista chave/valor |
title | string | "Metadados customizados" | Título exibido no cabeçalho do card |
description | string | — | Descrição exibida abaixo do título |
emptyText | string | "Nenhum metadado disponível." | Texto exibido quando não há metadados |
className | string | — | Classes adicionais aplicadas ao card |
MetadataModalButton
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
data | Record<string, unknown> | — | Objeto de metadados exibido no diálogo |
title | string | "Metadados customizados" | Título do diálogo |
description | string | — | Descrição exibida no cabeçalho do diálogo |
emptyText | string | "Nenhum metadado disponível." | Texto exibido quando não há metadados |
triggerLabel | string | usa title | Rótulo acessível do botão |
triggerClassName | string | — | Classes adicionais aplicadas ao botão padrão |
trigger | React.ReactNode | — | Conteúdo customizado do trigger (substitui o botão de ícone padrão) |
Uso
Card
<MetadataViewer
data={{ pedido_id: "ORD-198", cupom: "BLACKFRIDAY", parcelas: 3 }}
description="Campos enviados junto à cobrança"
/>Diálogo
<MetadataModalButton
data={{ pedido_id: "ORD-198", cupom: "BLACKFRIDAY", parcelas: 3 }}
/>Use o MetadataViewer em abas e painéis de detalhe e o MetadataModalButton em linhas de tabela ou cabeçalhos onde o espaço é limitado. Valores null/undefined são exibidos como —; objetos e arrays são serializados como JSON.