update cuz presentation

components/alerts.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { VAlert } from 'vuetify/components';
+import { computed } from 'vue';
+export type AlertData = Pick<InstanceType<typeof VAlert>["$props"],
+  | "color"
+  | "icon"
+  | "text"
+  | "title"
+  | "type"
+  | "closable"
+  | "closeIcon"
+>;
+
+const props = defineProps<{
+  alerts: Array<AlertData>;
+}>();
+
+// eslint-disable-next-line func-call-spacing
+const emit = defineEmits<{
+  (e: "update:alerts", value: typeof props.alerts): void,
+}>();
+
+const alerts = computed({
+  get() { return props.alerts ?? []; },
+  set(value: typeof props.alerts) { emit("update:alerts", value); },
+});
+
+</script>
+
+<template>
+  <VOverlay
+    model-value
+    :scrim="false"
+    no-click-animation
+    persistent
+    class="alerts"
+  >
+    <VAlert
+      v-for="i of alerts"
+      :key="alerts.indexOf(i)"
+      class="alert"
+      :color=" i.color"
+      model-value
+      :icon="i.icon ?? false"
+      :text="i.text"
+      :title="i.title"
+      :type="i.type ?? 'error'"
+      :closable="i.closable ?? true"
+      :close-icon="i.closeIcon ?? undefined"
+    />
+  </VOverlay>
+</template>
+
+<style scoped>
+.alerts {
+  flex-direction: column-reverse;
+  align-items: center;
+}
+
+.alert {
+  margin: 0.5em;
+}
+</style>