AlertBanner

'use client'
import { useState } from 'react'

const TYPES = {
  info:    { bg: '#eff6ff', border: '#bfdbfe', color: '#1d4ed8', icon: 'ℹ️' },
  success: { bg: '#f0fdf4', border: '#bbf7d0', color: '#15803d', icon: '✅' },
  warning: { bg: '#fffbeb', border: '#fde68a', color: '#b45309', icon: '⚠️' },
  error:   { bg: '#fef2f2', border: '#fecaca', color: '#b91c1c', icon: '🚫' },
}

export default function AlertBanner({ message = 'This is an alert', type = 'info', dismissible = true }) {
  const [visible, setVisible] = useState(true)
  const t = TYPES[type] || TYPES.info
  if (!visible) return null
  return (
    <div style={{
      display: 'flex', alignItems: 'flex-start', gap: '12px',
      background: t.bg, border: '1px solid ' + t.border, borderRadius: '10px',
      padding: '14px 18px', color: t.color,
    }}>
      <span style={{ fontSize: '18px' }}>{t.icon}</span>
      <p style={{ flex: 1, margin: 0, fontSize: '14px', fontWeight: 500 }}>{message}</p>
      {dismissible && (
        <button onClick={() => setVisible(false)} style={{
          background: 'none', border: 'none', color: t.color,
          cursor: 'pointer', fontSize: '16px', padding: 0
        }}>×</button>
      )}
    </div>
  )
}

Component info

About

Dismissible alert banner with icon and multiple severity levels