Alert.vue

<template>
  <div class="alert border-l-4 p-4 mb-4 mt-4" :class="`alert-${type}`">
    <div class="flex items-start">
      <div class="flex-shrink-0">
        <fa :icon="computedIcon" class="alert-icon" />
      </div>
      <div class="flex-grow ml-3 overflow-auto alert-content">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'info',
      validator(value) {
        return ['info', 'success', 'warning', 'danger'].includes(value)
      },
    },
    icon: {
      type: String,
      default: null,
    },
  },
  computed: {
    computedIcon() {
      if (this.icon) return this.icon
      return {
        info: 'info-circle',
        success: 'check-circle',
        warning: 'exclamation-circle',
        danger: 'exclamation-triangle',
      }[this.type]
    },
  },
}
</script>

<style lang="postcss">
.alert p {
  @apply m-0 !important;
}
.alert a {
  @apply text-current !important;
  filter: brightness(1.25);
}
.alert strong {
  @apply text-current !important;
  filter: brightness(1.25);
}
.alert-content pre code {
  background-color: inherit !important;
}
/* Info */
.alert-info {
  @apply bg-blue-100 border-blue-400;
}
.alert-info code {
  @apply bg-blue-200 shadow-none border-0 text-current;
}
.alert-info .alert-icon {
  @apply text-blue-400;
}
.alert-info .alert-content {
  @apply text-blue-700;
}
.dark .alert-info {
  @apply bg-blue-900 border-blue-700;
}
.dark .alert-info code {
  @apply bg-blue-800;
}
.dark .alert-info .alert-content {
  @apply text-blue-300;
}
/* Success */
.alert-success {
  @apply bg-green-100 border-green-400;
}
.alert-success code {
  @apply bg-green-200 shadow-none border-0 text-current;
}
.alert-success .alert-icon {
  @apply text-green-400;
}
.alert-success .alert-content {
  @apply text-green-700;
}
.dark .alert-success {
  @apply bg-green-900 border-green-700;
}
.dark .alert-success code {
  @apply bg-green-800;
}
.dark .alert-success .alert-content {
  @apply text-green-300;
}
/* Warning */
.alert-warning {
  @apply bg-yellow-100 border-yellow-400;
}
.alert-warning code {
  @apply bg-yellow-200 shadow-none border-0 text-current;
}
.alert-warning .alert-icon {
  @apply text-yellow-400;
}
.alert-warning .alert-content {
  @apply text-yellow-700;
}
.dark .alert-warning {
  @apply bg-yellow-800 border-yellow-600;
}
.dark .alert-warning code {
  @apply bg-yellow-800;
}
.dark .alert-warning .alert-content {
  @apply text-yellow-300;
}
/* Danger */
.alert-danger {
  @apply bg-red-100 border-red-400;
}
.alert-danger code {
  @apply bg-red-200 shadow-none border-0 text-current;
}
.alert-danger .alert-icon {
  @apply text-red-400;
}
.alert-danger .alert-content {
  @apply text-red-700;
}
.dark .alert-danger {
  @apply bg-red-900 border-red-700;
}
.dark .alert-danger code {
  @apply bg-red-800;
}
.dark .alert-danger .alert-content {
  @apply text-red-300;
}
</style>