Extract modal component

web/src/components/Button.vue

@@ -2,7 +2,9 @@
 </script>
 
 <template>
-        <button class="px-4 py-2 text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2">
-                <slot></slot>
-        </button>
+    <button
+        class="px-4 py-2 text-base font-medium rounded-md shadow-sm focus:outline-none focus:ring-2"
+    >
+        <slot></slot>
+    </button>
 </template>

web/src/components/Modal.vue

@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import Card from '../components/Card.vue';
+import { ref } from "vue";
+
+const props = defineProps<{
+    buttonText: string,
+}>();
+
+const emit = defineEmits<{
+  (e: 'submit'): void
+}>();
+
+const visible = ref(false);
+function closeDialog() {
+    visible.value = false;
+};
+function openDialog() {
+    visible.value = true;
+};
+function submitDialog() {
+    visible.value = false;
+    emit("submit");
+}
+</script>
+
+<template>
+    <Card>
+        <p class="w-24 text-center text-6xl">+</p>
+        <button class="text-lg" dark @click="openDialog">{{ buttonText }}</button>
+    </Card>
+    <div
+        v-if="visible"
+        class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
+    >
+        <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
+            <div class="mt-3 text-center">
+                <h3 class="mt-3 text-lg leading-6 font-medium text-gray-900">{{ buttonText }}</h3>
+                <slot></slot>
+                <div>
+                    <slot name="actions">
+                        <button
+                            @click="closeDialog"
+                            class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
+                        >Close</button>
+                        <button
+                            @click="submitDialog"
+                            class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-1/2 shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
+                        >Save</button>
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>