40 lines
1.6 KiB
Vue
40 lines
1.6 KiB
Vue
<script setup>
|
|
// define message prop - passed from parent
|
|
const { message } = defineProps({
|
|
message: String,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<Transition leave-active-class="duration-200">
|
|
<div
|
|
class="fixed top-1/2 left-1/4 overflow-y-auto px-4 py-6 sm:px-0 z-50 w-1/2"
|
|
scroll-region
|
|
>
|
|
<Transition
|
|
enter-active-class="ease-out duration-300"
|
|
enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
enter-to-class="opacity-100 translate-y-0 sm:scale-100"
|
|
leave-active-class="ease-in duration-200"
|
|
leave-from-class="opacity-100 translate-y-0 sm:scale-100"
|
|
leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
>
|
|
<div
|
|
class="text-gray-100 border border-sky-600 mb-6 rounded-lg overflow-hidden transform transition-all sm:w-full sm:mx-auto backdrop-blur p-5 flex flex-col"
|
|
:class="maxWidthClass"
|
|
>
|
|
<div class="flex flex-col justify-center items-center">
|
|
<h2 class="pt-2 text-xl text-center errormsg">
|
|
{{ message }}
|
|
</h2>
|
|
<div class="justify-center mt-5">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</Transition>
|
|
</Teleport>
|
|
</template>
|