tabler/shared/components/demo/Toast.astro

---
import Avatar from '@ui/Avatar.astro'
import { people } from '@shared/lib/people'
import { requireIndex } from '@shared/lib/array'

interface Props {
  toastId: string
  show?: boolean
  cookies?: boolean
  text?: string
}

const { toastId, show, cookies, text = 'Hello, world! This is a toast message.' } = Astro.props

const date = '11 mins ago'
/** people index, 0-based */
const person = requireIndex(people, 2)
---

<div class:list={['toast', show && 'show']} id={`toast-${toastId}`} role="alert" aria-live="assertive" aria-atomic="true" data-bs-autohide="false">
  <div class="toast-header gap-2">
    <Avatar person={person} size="xs" />
    <strong class="me-auto">{person.full_name}</strong>
    <small>{date}</small>
    <button type="button" class="ms-2 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    {
      cookies ? (
        <Fragment>
          🍪&nbsp;Our site uses cookies. By continuing to use our site, you agree to our Cookie Policy.
          <div class="mt-2 pt-2 border-top">
            <button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="toast">
              I understand
            </button>
          </div>
        </Fragment>
      ) : (
        <Fragment set:html={text} />
      )
    }
  </div>
</div>