idconvert/frontend/app/components/common/BaseAlert.vue

20 lines
567 B
Vue

<script setup>
defineProps({
variant: { type: String, default: 'error' }, // error | warning | success | info
})
</script>
<template>
<div
:class="[
'flex items-start gap-3 p-4 rounded-lg border text-sm',
variant === 'error' && 'bg-red-50 border-red-200 text-gray-800',
variant === 'warning' && 'bg-amber-50 border-amber-200 text-gray-800',
variant === 'success' && 'bg-green-50 border-green-200 text-gray-800',
variant === 'info' && 'bg-blue-50 border-blue-200 text-gray-800',
]"
>
<slot />
</div>
</template>