adrema/resources/js/components/ui/Note.vue

<template>
    <div class="relative p-3 border-2 rounded-lg flex space-x-2 items-start" :class="types[type].container">
        <div class="absolute flex items-center justify-center top-0 left-0 mt-[-12px] ml-[-12px] w-8 h-8">
            <svg class="absolute top-0 left-0 w-full h-full flex-none rotate-[105deg]" viewBox="-16 -16 32 32" :class="types[type].iconContainer">
                <circle cx="0" cy="0" r="15" stroke-dasharray="62.76896820 31.38448410" stroke-width="2"></circle>
            </svg>
            <ui-sprite :src="types[type].icon" class="relative w-4 h-4" :class="types[type].iconClass"></ui-sprite>
        </div>
        <div>
            <h3 class="font-semibold" :class="types[type].heading" v-text="types[type].intro"></h3>
            <div :class="types[type].body">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data: function () {
        return {
            types: {
                warning: {
                    container: 'bg-yellow-800 border-yellow-600',
                    heading: 'text-yellow-200',
                    icon: 'warning',
                    intro: 'Warnung',
                    body: 'text-yello-100',
                    iconContainer: 'stroke-yellow-600 fill-yellow-800',
                    iconClass: 'text-yellow-500',
                },
                danger: {
                    container: 'bg-red-800 border-red-600',
                    heading: 'text-red-200',
                    icon: 'danger',
                    intro: 'Achtung',
                    body: 'text-red-100',
                    iconContainer: 'stroke-red-600 fill-red-800',
                    iconClass: 'text-red-500',
                },
                info: {
                    container: 'bg-blue-800 border-blue-600',
                    heading: 'text-blue-200',
                    icon: 'info',
                    intro: 'Info',
                    body: 'text-blue-100',
                    iconContainer: 'stroke-blue-600 fill-blue-800',
                    iconClass: 'text-blue-500',
                },
            },
        };
    },

    props: {
        type: {
            default: () => 'info',
            required: false,
            type: String,
        },
    },
};
</script>