refactor to UI components

src/components/ui/UIAlert.vue

@@ -7,12 +7,18 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const styleClass = computed(() => {
-  const colorClass = `dui-alert-${props.color}`
+  const colorVariants = {
+    'info': 'dui-alert-info',
+    'success': 'dui-alert-success',
+    'warning': 'dui-alert-warning',
+    'error': 'dui-alert-error'
+  }
+  const colorClass = colorVariants[props.color]
   return [colorClass]
 })
 </script>
 <template>
-  <div class="dui-alert shadow-lg" :class="styleClass">
-    <div><slot></slot></div>
+  <div class="dui-alert shadow-lg items-start" :class="styleClass">
+    <div class="flex items-center"><slot></slot></div>
   </div>
 </template>