Propagated AlertMessage component

src/views/StatisticsView.vue

@@ -79,22 +79,11 @@
         {{ worldProperties.animationDurationSeconds }} seconds
       </div>
     </div>
-
     <button class="float-right" @click="captureGraphics()">Screenshot</button>
-
-    <!-- Another place to play with the sizing is in Resizer.setSize -->
-    <div id="scene-container" class="h-screen"></div>
-
-    <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>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>   
   </section>
 </template>
 
@@ -102,13 +91,14 @@
 import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js";
 import { Component, Vue } from "vue-facing-decorator";
 import { World } from "@/components/World/World.js";
+import AlertMessage from "@/components/AlertMessage";
 
 interface WorldProperties {
   startTime?: string;
   endTime?: string;
 }
 
-@Component
+@Component({ components: { AlertMessage } })
 export default class StatisticsView extends Vue {
   world: World;
   worldProperties: WorldProperties = {};
@@ -210,23 +200,6 @@ export default class StatisticsView extends Vue {
     this.alertTitle = "";
     this.alertMessage = "";
   }
-
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.isAlertVisible,
-      "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,
-    };
-  }
 }
 
 function ExportToSVG(rendererSVG, filename) {