.

wip-refactor/components/Modal.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+// Modal.vue 
+// Assume component existing means it's open
+// Closing a modal emits a close event
+// Ensure everything outside of modal gets darkened to 80% opacity
+
+const emit = defineEmits(['close']);
+
+</script>
+
+<template>
+    <div>
+        <div class="modal-overlay" @click="emit('close')">
+            <div class="modal-content max-w-[50rem]" @click.stop>
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style>
+    .modal-overlay {
+        @apply fixed top-0 left-0 flex justify-center w-screen h-screen;
+        background-color: rgba(0, 0, 0, 0.2);
+        overflow: scroll;
+    }
+
+    .modal-content {
+        @apply bg-overlay-0 max-h-[48rem];
+        padding: 1rem;
+        border-radius: 0.5rem;
+        overflow: scroll;
+    }
+</style>