#42 - fix

resources/js/Shared/FlashMessage.vue

@@ -1,95 +0,0 @@
-<template>
-  <transition
-    enter-active-class="transform ease-out duration-300 transition"
-    enter-from-class="opacity-0"
-    enter-to-class="opacity-100"
-    leave-active-class="transition ease-in duration-100"
-    leave-from-class="opacity-100"
-    leave-to-class="opacity-0"
-  >
-    <div
-      v-if="show"
-      class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-green-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"
-    >
-      <div class="p-4">
-        <div class="flex items-center">
-          <div class="w-0 flex-1 flex justify-between">
-            <CheckCircleIcon class="h-5 w-5 text-white mr-2" />
-            <p class="w-0 flex-1 text-sm font-medium text-white">
-              {{ message }}
-            </p>
-          </div>
-          <div class="ml-4 flex-shrink-0 flex">
-            <button
-              class="bg-green-500 rounded-md inline-flex text-green-100 hover:text-green-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-600"
-              @click="show = false"
-            >
-              <span class="sr-only">Close</span>
-              <XIcon
-                class="h-5 w-5"
-                aria-hidden="true"
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </transition>
-<!--  <div-->
-<!--    v-if="($page.props.flash.error) && show"-->
-<!--    class="fixed bottom-4 right-0 mx-auto w-full max-w-md bg-red-500 shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden z-50 sm:mr-4"-->
-<!--  >-->
-<!--    <div class="p-4">-->
-<!--      <div class="flex items-center">-->
-<!--        <div class="w-0 flex-1 flex justify-between">-->
-<!--          <ExclamationIcon class="h-5 w-5 text-white mr-2" />-->
-<!--          <p class="w-0 flex-1 text-sm font-medium text-white">-->
-<!--            {{ $page.props.flash.error }}-->
-<!--          </p>-->
-<!--        </div>-->
-<!--        <div class="ml-4 flex-shrink-0 flex">-->
-<!--          <button-->
-<!--            class="bg-red-500 rounded-md inline-flex text-red-100 hover:text-red-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600"-->
-<!--            @click="show = false"-->
-<!--          >-->
-<!--            <span class="sr-only">Close</span>-->
-<!--            <XIcon-->
-<!--              class="h-5 w-5"-->
-<!--              aria-hidden="true"-->
-<!--            />-->
-<!--          </button>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--  </div>-->
-</template>
-
-<script>
-import {XIcon} from '@heroicons/vue/outline'
-import {ExclamationIcon, CheckCircleIcon} from '@heroicons/vue/solid'
-import {ref} from 'vue'
-
-export default {
-  name: 'FlashMessage',
-  components: {
-    CheckCircleIcon,
-    ExclamationIcon,
-    XIcon,
-  },
-  props: {
-    message: {
-      type: String,
-      default: () => null,
-    },
-  },
-  setup() {
-    const show = ref(true)
-
-    setTimeout(() => show.value = false, 6000)
-
-    return {
-      show,
-    }
-  },
-}
-</script>

resources/js/Shared/Layout/GuestLayout.vue

@@ -1,14 +1,23 @@
 <template>
   <div class="min-h-screen flex flex-col justify-center py-12 sm:px-6 lg:px-8 bg-blumilk-25">
-    <FlashMessage />
+    <ErrorAlert
+      v-if="flash.error"
+      :message="flash.error"
+    />
     <slot />
   </div>
 </template>
 
 <script>
-import FlashMessage from '@/Shared/FlashMessage'
+import ErrorAlert from '@/Shared/Alerts/ErrorAlert'
 export default {
   name: 'GuestLayout',
-  components: {FlashMessage},
+  components: {ErrorAlert},
+  props: {
+    flash: {
+      type: Object,
+      default: () => null,
+    },
+  },
 }
 </script>