ปรับ look and feel

This commit is contained in:
Suphonchai Phoonsawat 2026-08-20 21:34:45 +07:00
parent 0148f48204
commit b47667f918
15 changed files with 915 additions and 523 deletions

View file

@ -10,18 +10,18 @@ const props = withDefaults(
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'
return 'alert-error'
case 'success':
return 'border-emerald-300 bg-emerald-50 text-emerald-700 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-300'
return 'alert-success'
default:
return 'border-sky-300 bg-sky-50 text-sky-700 dark:border-sky-800 dark:bg-sky-950 dark:text-sky-300'
return 'alert-info'
}
})
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">
<div role="alert" class="alert" :class="styles">
<span class="mr-2" aria-hidden="true">{{ icon }}</span>
<slot />
</div>