29 lines
1,015 B
Vue
29 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>
|