tabler/shared/ui/Alert.astro

---
import Icon from './Icon.astro'

/** alert-{type} / btn-{type} — matches defaultIcons below */
type AlertType = 'success' | 'warning' | 'danger' | 'info'

interface Props {
  type?: AlertType
  important?: boolean
  minor?: boolean
  showClose?: boolean
  class?: string
  title?: string
  description?: string
  list?: string[]
  action?: string
  link?: string
}

const { type = 'success', important, minor, showClose, class: className, title = 'This is a custom alert box!', description, list, action, link } = Astro.props

const defaultIcons: Record<AlertType, string> = {
  success: 'check',
  warning: 'alert-triangle',
  danger: 'alert-circle',
  info: 'info-circle',
}
const icon = defaultIcons[type]

const classes = ['alert', important ? 'alert-important' : minor ? 'alert-minor' : undefined, `alert-${type}`, showClose && 'alert-dismissible', className]
---

<div class:list={classes} role="alert">
  <div class="alert-icon">{icon && <Icon name={icon} class="alert-icon" />}</div>
  {
    description || list ? (
      <div>
        {/* set:html preserves entities like &hellip; in the title */}
        <h4 class="alert-heading" set:html={title} />
        <div class="alert-description">
          <Fragment set:html={description ?? ''} />
          {list && list.length > 0 && (
            <ul class="alert-list">
              {list.map((item) => (
                <li>{item}</li>
              ))}
            </ul>
          )}
        </div>
      </div>
    ) : (
      <Fragment>
        <Fragment set:html={title} />
        {/* prettier-ignore — anchor on one line (whitespace ends up in the code panel) */}
        {action ? (
          <a href="#" class="alert-action">
            {action}
          </a>
        ) : link ? (
          <a href="#" class="alert-link">
            {link}
          </a>
        ) : null}
      </Fragment>
    )
  }
  {showClose && <a class="btn-close" data-bs-dismiss="alert" aria-label="close" />}
</div>