52 lines
2.6 KiB
Vue
52 lines
2.6 KiB
Vue
<script setup>
|
|
import { ref, watch } from 'vue'
|
|
import { usePage } from '@inertiajs/vue3'
|
|
|
|
const page = usePage()
|
|
const visible = ref(false)
|
|
const type = ref('success')
|
|
const message = ref('')
|
|
|
|
watch(() => page.props.flash, (flash) => {
|
|
if (flash?.success) {
|
|
type.value = 'success'
|
|
message.value = flash.success
|
|
visible.value = true
|
|
setTimeout(() => visible.value = false, 4000)
|
|
} else if (flash?.error) {
|
|
type.value = 'error'
|
|
message.value = flash.error
|
|
visible.value = true
|
|
setTimeout(() => visible.value = false, 6000)
|
|
}
|
|
}, { immediate: true, deep: true })
|
|
</script>
|
|
|
|
<template>
|
|
<Transition enter-from-class="opacity-0 -translate-y-2" enter-active-class="transition-all duration-300"
|
|
leave-to-class="opacity-0 -translate-y-2" leave-active-class="transition-all duration-200">
|
|
<div v-if="visible"
|
|
:class="['mx-6 mt-4 flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium shadow-sm',
|
|
type === 'success' ? 'bg-green-50 text-green-800 border border-green-200' : 'bg-red-50 text-red-800 border border-red-200']">
|
|
<svg v-if="type === 'success'" class="h-5 w-5 flex-shrink-0 text-green-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
<svg v-else class="h-5 w-5 flex-shrink-0 text-red-500" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
<span class="flex-1">{{ message }}</span>
|
|
<button @click="visible = false" class="flex-shrink-0 opacity-60 hover:opacity-100">
|
|
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd"
|
|
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</Transition>
|
|
</template>
|