feat: build UI

app/components/dashboard/Warning.vue

@@ -0,0 +1,36 @@
+<script setup>
+const props = defineProps({
+  name: String,
+  details: String,
+  level: Number,
+  type: String
+})
+
+const color = computed(() => {
+  if (props.level === 1) return 'yellow';
+  if (props.level === 2) return 'orange';
+  if (props.level === 3) return 'red';
+})
+</script>
+
+
+<template>
+  <div
+    :class="['card m-0', `has-background-${color}-95`]"
+    :style="{
+      borderColor: `var(--bulma-${color}-70)`,
+    }"
+  >
+    <div class="card-content p-4 is-flex is-align-items-center is-gap-2">
+      <Icon 
+        :name="type === 'time' ? 'material-symbols:clock-loader-40' : 'material-symbols:box-outline-rounded'"
+        :size="20"
+        :class="`has-text-${color}-45`"
+      />
+      <div>
+        <p :class="`has-text-${color}-40`">{{ name }}</p>
+        <p class="fs-13 has-text-grey">{{ details }}</p>
+      </div>
+    </div>
+  </div>
+</template>