# PreviewCard

O cartao que aparece ao pousar sobre um link: quem e o cliente, o que é aquela
nota, o resumo do termo.

**Não e `Tooltip`.** A dica explica um botão em poucas palavras e some ao sair;
o cartao mostra conteúdo que da para ler com calma, e por isso ele espera antes
de abrir e demora a fechar, para o ponteiro chegar até ele.

Nada que só exista aqui e alcancavel por toque, então o cartao nunca pode ser o
único caminho para uma informação.

```tsx
<PreviewCard>
  <PreviewCardTrigger render={<a href="/clientes/4813" />}>Clinica Sao Lucas</PreviewCardTrigger>
  <PreviewCardContent>
    <p className="font-medium text-fg">Clinica Sao Lucas</p>
    <p className="text-sm text-fg-muted">12.345.678/0001-99, cliente desde 2023.</p>
  </PreviewCardContent>
</PreviewCard>
```

## No React Native

Não porta, por decisão - aparece ao pousar o ponteiro, e não há pousar no toque. Não é fila: não vai existir. A [tabela de paridade](/react-native) diz o porquê de cada uma.

## Importação

```tsx
import { PreviewCard } from '@rivocode/ui'
```

## Exemplos

### Em link

```tsx
import { PreviewCard, PreviewCardContent, PreviewCardTrigger } from '@rivocode/ui'

export function OnALink() {
  return (
    <div className="min-h-40 w-80">
      <p className="text-base text-fg">
        A nota foi emitida para a{' '}
        <PreviewCard defaultOpen>
          <PreviewCardTrigger
            href="#"
            className="text-accent-text underline decoration-1 underline-offset-2"
          >
            Clínica São Lucas
          </PreviewCardTrigger>
          <PreviewCardContent>
            <p className="font-medium text-fg">Clínica São Lucas</p>
            <p className="mt-1 text-sm text-fg-muted">
              12.345.678/0001-99, cliente desde 2023. Quatro notas em aberto.
            </p>
          </PreviewCardContent>
        </PreviewCard>{' '}
        nesta manha.
      </p>
    </div>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `actionsRef` | `RefObject<PreviewCardRootActions \| null>` |  | 0.4.0 | A ref to imperative actions. |
| `defaultOpen` | `boolean` |  | 0.4.0 | Whether the preview card is initially open. |
| `defaultTriggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the preview card is associated with. |
| `handle` | `PreviewCardHandle<Payload>` |  | 0.4.0 | A handle to associate the preview card with a trigger. |
| `onOpenChange` | `((open: boolean, eventDetails: PreviewCardRootChangeEventDetails) => void)` |  | 0.4.0 | Event handler called when the preview card is opened or closed. |
| `onOpenChangeComplete` | `((open: boolean) => void)` |  | 0.4.0 | Event handler called after any animations complete when the preview card is opened or closed. |
| `open` | `boolean` |  | 0.4.0 | Whether the preview card is currently open. |
| `triggerId` | `string \| null` |  | 0.4.0 | ID of the trigger that the preview card is associated with. |

## Ver também

- [AlertDialog](/componentes/alert-dialog.md)
- [ContextMenu](/componentes/context-menu.md)
- [Dialog](/componentes/dialog.md)
- [Popconfirm](/componentes/popconfirm.md)
- [Popover](/componentes/popover.md)
- [Sheet](/componentes/sheet.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)