1 files changed, 32 insertions, 0 deletions
diff --git a/src/ui/c-alert/c-alert.vue b/src/ui/c-alert/c-alert.vue
new file mode 100644
index 0000000..1fedbb0
--- /dev/null
+++ b/src/ui/c-alert/c-alert.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="c-alert" flex items-center b-rd-4px pa-5>
+    <div class="c-alert--icon" mr-4 text-40px op-60>
+      <slot name="icon">
+        <component :is="variantTheme.icon" />
+      </slot>
+    </div>
+
+    <div class="c-alert--content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from './c-alert.theme';
+
+const props = withDefaults(defineProps<{ type?: 'warning' }>(), { type: 'warning' });
+const { type } = toRefs(props);
+
+const theme = useTheme();
+const variantTheme = computed(() => theme.value[type.value]);
+</script>
+
+<style lang="less" scoped>
+.c-alert {
+  background-color: v-bind('variantTheme.backgroundColor');
+  color: v-bind('variantTheme.textColor');
+  font-size: inherit;
+  line-height: 20px;
+}
+</style>