AlertMessage

Muestra un banner de alerta con fondo determinado por la prop type. Soporta un ícono opcional a la izquierda, un botón de cierre descartable y una animación de efecto máquina de escribir para el texto del mensaje.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | message | string | Sí | — | Texto del mensaje de alerta. | | type | 'primary' \| 'danger' \| 'warning' \| 'success' \| 'info' | No | 'primary' | Determina el color de fondo. | | icon | string | No | — | Nombre del ícono mostrado a la izquierda. | | dismissible | boolean | No | false | Cuando es true, muestra un botón de cierre. | | animateMessage | boolean | No | false | Cuando es true, el mensaje aparece con efecto de escritura. | | animationSpeed | number | No | 50 | Velocidad de la animación en milisegundos por carácter. | | onAnimationComplete | () => void | No | — | Se ejecuta al finalizar la animación de escritura. | | onClose | () => void | No | — | Se ejecuta al hacer clic en el botón de cierre. | | containerStyle | React.CSSProperties | No | — | Estilos en línea para el contenedor. | | iconStyle | React.CSSProperties | No | — | Estilos en línea para el ícono. | | messageStyle | React.CSSProperties | No | — | Estilos en línea para el texto del mensaje. |

Uso

Básico

import AlertMessage from '@/components/AlertMessage';

export default function Example() {
  return (
    <AlertMessage
      type="success"
      message="Los cambios fueron guardados."
      icon="check"
    />
  );
}

Descartable con callback

import { useState } from 'react';
import AlertMessage from '@/components/AlertMessage';

export default function Example() {
  const [visible, setVisible] = useState(true);

  if (!visible) return null;

  return (
    <AlertMessage
      type="warning"
      message="Tu sesión expirará en 5 minutos."
      icon="warning"
      dismissible
      onClose={() => setVisible(false)}
    />
  );
}

Mensaje animado

import AlertMessage from '@/components/AlertMessage';

export default function Example() {
  return (
    <AlertMessage
      type="info"
      message="¡Bienvenido! Aquí tienes un consejo para comenzar."
      animateMessage
      animationSpeed={40}
      onAnimationComplete={() => console.log('Animación completada')}
    />
  );
}