Alert.vue

<script setup lang="ts">
import { useColorOrPastel } from '~/composables/colors'
import type { PastelProps } from '~/types/common-props'

const props = defineProps<PastelProps>()
const color = useColorOrPastel(() => props.color, 'blue')
</script>

<template>
  <div
    class="funkwhale is-colored alert"
    :class="[color]"
  >
    <slot />

    <div v-if="$slots.actions" class="actions">
      <slot name="actions" />
    </div>
  </div>
</template>

<style lang="scss">
@import './style.scss'
</style>