63 lines
2.3 KiB
Vue
63 lines
2.3 KiB
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>
|