ปรับ look and feel
This commit is contained in:
parent
0148f48204
commit
b47667f918
15 changed files with 915 additions and 523 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue