tabler/shared/ui/Alert.astro

---
import type { HTMLTag } from 'astro/types'
import Icon from './Icon.astro'

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

interface Props {
  color?: AlertColor
  /** alert-important (filled) / alert-minor (borderless) style variants */
  variant?: 'important' | 'minor'
  showClose?: boolean
  class?: string
  title?: string
  /** heading level for the title; match it to the surrounding context */
  titleAs?: HTMLTag
  description?: string
  list?: string[]
  action?: string
  link?: string
  /** remaining attributes (id, data-*, aria-*, …) are forwarded to the root element */
  [key: string]: unknown
}

const { color = 'success', variant, showClose, class: className, title, titleAs: Title = 'h3', description, list, action, link, ...rest } = Astro.props

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

const classes = ['alert', variant && `alert-${variant}`, `alert-${color}`, showClose && 'alert-dismissible', className]
---

<div class:list={classes} role="alert" {...rest}>
  <div class="alert-icon">{icon && <Icon name={icon} class="alert-icon" />}</div>
  {
    description || list ? (
      <div>
        {/* set:html preserves entities like &hellip; in the title */}
        {title && <Title 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 && <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="close" />}
</div>