From bcc6de6fc0a3af4be4170c812c232e0451542785 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 19:40:53 +0800
Subject: [PATCH] New AlertMessage component

---
 src/components/AlertMessage.vue | 48 +++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/AlertMessage.vue

diff --git a/src/components/AlertMessage.vue b/src/components/AlertMessage.vue
new file mode 100644
index 00000000..9e8666ef
--- /dev/null
+++ b/src/components/AlertMessage.vue
@@ -0,0 +1,48 @@
+<template>
+    <div v-bind:class="computedAlertClassNames()">
+      <button
+        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+        @click="onClickClose()"
+      >
+        <fa icon="xmark"></fa>
+      </button>
+      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
+      <p>{{ alertMessage }}</p>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+@Component
+export default class AlertMessage extends Vue {
+  alertTitle = "";
+  alertMessage = "";
+
+  public onClickClose() {
+    this.alertTitle = "";
+    this.alertMessage = "";
+  }
+
+  public computedAlertClassNames() {
+    return {
+      hidden: !this.alertMessage,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      fixed: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
+
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped></style>