28 lines
1.0 KiB
Vue
28 lines
1.0 KiB
Vue
<script setup lang="ts">
|
|
import { computed } from 'vue';
|
|
|
|
type Severity = 'success' | 'info' | 'warn' | 'error';
|
|
|
|
const props = withDefaults(defineProps<{ severity?: Severity }>(), { severity: 'info' });
|
|
|
|
const styles: Record<Severity, { container: string; icon: string }> = {
|
|
success: { container: 'border-green-200 bg-green-50 text-green-800', icon: 'fas fa-check-circle' },
|
|
info: { container: 'border-sky-200 bg-sky-50 text-sky-800', icon: 'fas fa-info-circle' },
|
|
warn: { container: 'border-amber-200 bg-amber-50 text-amber-800', icon: 'fas fa-exclamation-triangle' },
|
|
error: { container: 'border-red-200 bg-red-50 text-red-800', icon: 'fas fa-times-circle' },
|
|
};
|
|
|
|
const style = computed(() => styles[props.severity]);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex items-start gap-2 rounded-md border px-4 py-3"
|
|
:class="style.container"
|
|
:role="severity === 'error' ? 'alert' : 'status'"
|
|
>
|
|
<i :class="style.icon" class="mt-1 shrink-0" aria-hidden="true" />
|
|
<div><slot /></div>
|
|
</div>
|
|
</template>
|