Landing/Problem Cards Container
Problem Cards Container
Organismo que agrupa tarjetas de problema. En desktop muestra las tarjetas en fila horizontal; en mobile (debajo de 768px) las apila en columna. Gestiona el estado activo de cada tarjeta al hacer hover.
5 Tarjetas — Datos por Defecto
La primera tarjeta comienza activa. Hover sobre cada tarjeta para activarla. Reducí el ancho del navegador para ver el layout vertical.
Obras que empiezan sin aprobación
Carpetas físicas que se pierden
Ingresos sin autorización
Obras que incumplen y nadie se hace cargo
Conflictos entre propietario, arquitecto y administración
3 Tarjetas
El contenedor se adapta a cualquier cantidad de tarjetas.
Obras que empiezan sin aprobación
Carpetas físicas que se pierden
Ingresos sin autorización
Props IProblemCardsContainerProps
| Prop | Tipo | Requerido | Default | Descripción |
|---|---|---|---|---|
cards | Array<IProblemCardData> | Sí | — | Array de datos para cada tarjeta. |
defaultActiveIndex | number | No | 0 | Índice de la tarjeta activa por defecto. |
className | string | No | — | Clases CSS adicionales para el contenedor. |
Tipo IProblemCardData
Estructura de cada item del array cards.
| Campo | Tipo | Requerido | Default | Descripción |
|---|---|---|---|---|
icon | React.ReactNode | Sí | — | Ícono de la tarjeta. |
text | string | Sí | — | Texto descriptivo del problema. |
color | 'red' | 'orange' | No | auto-alterna | Color de la tarjeta. Si no se especifica, alterna entre 'red' y 'orange'. |