Landing/Problem Card
Problem Card
Átomo de tarjeta de problema para la landing page. Tiene dos estados visuales: default (borde sutil) y active (fondo + borde de color). Se usa dentro de ProblemCardsContainer que gestiona el estado de hover.
Estado Default
Sin fondo. El borde izquierdo usa el tono más claro del color.
Carpetas físicas que se pierden
Ingresos sin autorización
Estado Active
Con fondo de color suave y borde izquierdo del color principal. Se activa en hover y press.
Carpetas físicas que se pierden
Ingresos sin autorización
Variantes de Color
Comparación entre color red y orange en ambos estados.
color="red"
Obras que empiezan sin aprobación
Obras que empiezan sin aprobación
color="orange"
Carpetas físicas que se pierden
Carpetas físicas que se pierden
Props
| Prop | Tipo | Requerido | Default | Descripción |
|---|---|---|---|---|
icon | React.ReactNode | Sí | — | Ícono a mostrar en la parte superior de la tarjeta. |
text | string | Sí | — | Texto descriptivo del problema. |
color | 'red' | 'orange' | No | 'red' | Color del borde y fondo activo. |
state | 'default' | 'active' | No | 'default' | Estado visual de la tarjeta. 'active' se usa en hover/press. |
className | string | No | — | Clases CSS adicionales. |