28 lines
1,015 B
Vue
28 lines
1,015 B
Vue
<script setup lang="ts">
|
||
/** กล่องข้อความ (error/success/info) ใช้ร่วมทุกหน้า */
|
||
const props = withDefaults(
|
||
defineProps<{
|
||
type?: 'error' | 'success' | 'info'
|
||
}>(),
|
||
{ type: 'info' },
|
||
)
|
||
|
||
const styles = computed(() => {
|
||
switch (props.type) {
|
||
case 'error':
|
||
return 'border-red-300 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-950 dark:text-red-300'
|
||
case 'success':
|
||
return 'border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300'
|
||
default:
|
||
return 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-950 dark:text-sky-300'
|
||
}
|
||
})
|
||
const icon = computed(() => (props.type === 'error' ? '⚠️' : props.type === 'success' ? '✅' : 'ℹ️'))
|
||
</script>
|
||
|
||
<template>
|
||
<div role="alert" class="rounded-md border px-4 py-3 text-sm" :class="styles">
|
||
<span class="mr-2" aria-hidden="true">{{ icon }}</span>
|
||
<slot />
|
||
</div>
|
||
</template>
|