Badge com ícone de pasta e até três imagens: em repouso mostram um “peek”; ao passar o rato (ou focar com teclado quando usado como link), as imagens abrem em leque com animação em mola. O componente está em @zexon/ui/blocks/images-badge e usa Motion (motion/react).
Instalação
No monorepo Zexon, o pacote @zexon/ui já inclui a dependência motion. No teu projeto basta importar:
import { ImagesBadge } from "@zexon/ui/blocks/images-badge";Se copiares o código para um projeto externo, instala motion e as utilidades de classe (clsx, tailwind-merge) alinhadas ao teu cn().
Uso
Padrão
Exemplos
Grande
Pastas e pré-visualizações maiores; útil para hero ou destaques.
Grande
Compacto
Menos espaço vertical; com duas imagens o leque centra-se em duas folhas.
Compacto
Espalhamento largo
Aumenta hoverSpread e hoverRotation para um efeito mais aberto em galeria.
Espalhamento largo
Chamada com link
Com href, o contentor torna-se um <a>. Usa target="_blank" com rel gerido pelo componente quando aplicável.
Referência de props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
text | string | — | Texto ao lado da pasta. |
images | string[] | — | URLs das imagens (no máximo 3 são mostradas). |
className | string | — | Classes extra no contentor raiz. |
href | string | — | Se definido, o raiz é um link. |
target | string | — | Ex.: _blank para nova aba. |
folderSize | { width: number; height: number } | { width: 32, height: 24 } | Tamanho da pasta em px. |
teaserImageSize | { width: number; height: number } | { width: 20, height: 14 } | Tamanho das imagens no estado “peek”. |
hoverImageSize | { width: number; height: number } | { width: 48, height: 32 } | Tamanho das imagens com hover. |
hoverTranslateY | number | -35 | Deslocamento vertical no hover (px). |
hoverSpread | number | 20 | Espalhamento horizontal no hover (px). |
hoverRotation | number | 15 | Rotação do leque no hover (graus). |
Anterior:
Próximo: