Componentes reutilizables para mostrar mensajes informativos, alertas y avisos
Tipo: Info (por defecto)
La información sobre este alojamiento es meramente informativa y la ha facilitado el proveedor. Puede estar sujeta a cambios. Recomendamos verificarla directamente con el alojamiento.
Tipo: Warning
Algunos servicios pueden estar disponibles únicamente en habitaciones específicas o previa solicitud.
Tipo: Success
Tu reserva ha sido confirmada exitosamente. Recibirás una confirmación en tu correo electrónico.
Tipo: Error
Ocurrió un error al procesar tu solicitud. Por favor, intenta de nuevo más tarde.
Sin icono
Este es un mensaje informativo sin icono.
La información sobre este alojamiento es meramente informativa y la ha facilitado el proveedor. Puede estar sujeta a cambios. Recomendamos verificarla directamente con el alojamiento.
Algunos servicios pueden estar disponibles únicamente en habitaciones específicas o previa solicitud.
Por favor, verifica los requisitos de check-in y check-out antes de tu llegada.
// Mensaje individual
<InformativeMessage
message="La información sobre este alojamiento es meramente informativa..."
type="info"
/>
// Lista de mensajes
<InformativeMessageList
messages={[
{ message: "Primer mensaje", type: "info" },
{ message: "Segundo mensaje", type: "warning" }
]}
spacing={2}
/>
// Con props personalizados
<InformativeMessage
message="Mensaje personalizado"
type="success"
showIcon={true}
fullWidth={true}
sx={{ marginTop: 2 }}
/>message: string - Texto del mensaje (requerido) type: "info" | "warning" | "success" | "error" - Tipo de mensaje icon: React.ReactNode - Icono personalizado showIcon: boolean - Mostrar/ocultar icono (default: true) fullWidth: boolean - Ancho completo (default: true) sx: SxProps - Estilos personalizados
messages: InformativeMessageItem[] - Array de mensajes (requerido) spacing: number - Espaciado entre mensajes (default: 2) fullWidth: boolean - Ancho completo (default: true) sx: SxProps - Estilos personalizados