updating how modals are done

src/resources/js/Components/Modals/DialogModal.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { reactive } from 'vue'
+import Modal from './Modal.vue'
+
+const emit = defineEmits(['close'])
+
+const props = defineProps({
+  show: {
+    default: false
+  },
+  maxWidth: {
+    default: '2xl'
+  },
+  closeable: {
+    default: true
+  },
+})
+
+// methods
+const close = (() {
+  emit('close')
+})
+</script>
+
+<template>
+    <Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
+        <div class="px-6 py-4">
+            <div class="text-lg">
+                <slot name="title"></slot>
+            </div>
+
+            <div class="mt-4">
+                <slot name="content"></slot>
+            </div>
+        </div>
+
+        <div class="flex flex-row justify-end px-6 py-4 bg-gray-100 text-right">
+            <slot name="footer"></slot>
+        </div>
+    </Modal>
+</template>