phase 6 เบื้องต้น

web/app/components/AlertBox.vue

@@ -0,0 +1,28 @@
+<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>