Shared/Empty State Card

Empty State Card

Tarjeta reutilizable para vacíos (empty states) con icono, título, descripción y dos CTAs. Diseñada para mostrar siempre el contexto y las acciones principales/secundarias.

Estado vacío — base

Versión estándar con icono centrado, texto centrado y botones redondeados full-height (h-8).

Aún no hay propiedades registradas

Cuando agregues la primera propiedad del barrio, vas a poder visualizar su información y obras asociadas

Nueva propiedad Importar información

Contenido largo — wrap

Soporta títulos y descripciones extensas sin romper el layout; mantiene centrado y espaciado.

Aún no hay datos disponibles para mostrar en esta sección

Probá con un texto más largo para validar el salto de línea, el ancho del bloque de texto y el espaciado de los CTAs en pantallas chicas

Crear ahora Ver guía

Casos de uso

Listados sin elementos (por ejemplo: propiedades, obras, miembros).
Primer acceso a un módulo que requiere creación o importación.
Empty states dentro de páginas con navegación a una acción principal y una secundaria.

Variantes visuales

Button primary: variant="default".
Button secondary: variant="secondary".

Props

Prop	Tipo	Descripción
`icon`	`IIconProps['icon']`	Ícono (solo @repo/icons / SVGR autorizado).
`title`	`string`	Título principal del empty state.
`description`	`string`	Explicación secundaria (contexto + qué sigue).
`primaryButton`	`{ label: string; href?: string; onClick?: () => void }`	CTA principal (acción más importante).
`secondaryButton`	`{ label: string; href?: string; onClick?: () => void }`	CTA secundaria (acción alternativa).
`iconAriaLabel`	`string \| undefined`	Si se requiere accesibilidad semántica para el ícono.