Lastly, for our alerts, let’s add in a little interactivity. In this lesson, we’re going to make our alerts:

• Dismissible, meaning that if we click a close button the alert should go away.

• Self-destructible, meaning that after a defined time the alert should remove itself.

Making Our Alerts Dismissible

First, let’s conditionally make our alerts dismissible. Since our AlpineJS state for this is going to be pretty simple, and we’ll want to derive the default value from our component’s props, I’m going to define the x-data within EdgeJS and pass it into AlpineJS as a string.

// resources/views/components/alert/index.edge

@set('variant', variant ?? 'light')
@set('variants', variants ?? {
  light: `bg-white text-neutral-900`,
  dark: `bg-black text-neutral-100`,
  blue: `border-transparent bg-blue-600 text-white`,
  red: `border-transparent bg-red-600 text-white`,
  green: `border-transparent bg-green-500 text-white`,
  yellow: `border-transparent bg-yellow-500 text-white`,
})

@set('slots', { ...$slots, ...$props.$slots })
++@set('data', {
++  show: show ?? true,
++  dismissible: dismissible ?? false,
++})

<div 
++  x-data="{{ stringify(data) }}"
++  x-show="show"
  class="{{ variants[variant] }} relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] {{ slots.icon ? 'pl-11' : '' }}">

    @if (slots.icon)
      {{{ await slots.icon() }}}
    @endif

    @if (title || slots.title)
      <h5 class="mb-1 font-medium leading-none tracking-tight">
        @if (title)
          {{ title }}
        @else
          {{{ await slots.title() }}}
        @endif
        Alert Message Headline
      </h5>
    @endif

    @set('mainSlot', await slots.main())
    @if (message || mainSlot)
      <div class="text-sm opacity-70">
        @if (message)
          {{ message }}
        @else
          {{{ mainSlot }}}
        @endif
        This is the subtext for your alert message, providing important information or instructions.
      </div>
    @endif
</div>