From e80212bb5c623861a0f87fa853e932b22686cb72 Mon Sep 17 00:00:00 2001
From: Geriano <gerznewbie@gmail.com>
Date: Sat, 30 Jul 2022 10:03:24 +0700
Subject: [PATCH] create modal component

---
 resources/js/Components/Modal.vue | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)
 create mode 100644 resources/js/Components/Modal.vue

diff --git a/resources/js/Components/Modal.vue b/resources/js/Components/Modal.vue
new file mode 100644
index 0000000..0666411
--- /dev/null
+++ b/resources/js/Components/Modal.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { getCurrentInstance, ref, Teleport } from 'vue';
+
+const { show } = defineProps({
+  show: Boolean,
+})
+</script>
+
+<template>
+  <Teleport to="body">
+    <transition
+      enterActiveClass="transition-all duration-200"
+      leaveActiveClass="transition-all duration-50"
+      enterFromClass="-translate-y-full opacity-0"
+      leaveToClass="-translate-y-full opacity-0">
+      <div v-if="show" class="fixed top-0 left-0 w-full h-full min-h-screen flex justify-center backdrop-blur p-10 z-20">
+        <slot />
+      </div>
+    </transition>
+  </Teleport>
+</template>
\ No newline at end of file