first commit

frontend/src/components/CreateSpaceModal.vue

@@ -0,0 +1,52 @@
+<template>
+    <teleport to="body">
+        <div class="modal fade show d-block" tabindex="-1" role="dialog" aria-modal="true" @click.self="closeModal">
+            <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title">Create New Space</h5>
+                        <button type="button" class="btn-close" aria-label="Close" @click="closeModal"></button>
+                    </div>
+                    <div class="modal-body">
+                        <form @submit.prevent="handleCreate">
+                            <div class="mb-3">
+                                <label for="spaceName" class="form-label">Space Name</label>
+                                <input id="spaceName" v-model="form.name" type="text" class="form-control" required />
+                            </div>
+                            <div class="mb-3">
+                                <label for="spaceDesc" class="form-label">Description</label>
+                                <textarea id="spaceDesc" v-model="form.description" class="form-control" rows="3"></textarea>
+                            </div>
+                            <button type="submit" class="btn btn-primary">Create</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal-backdrop fade show"></div>
+    </teleport>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const emit = defineEmits(["close", "create"]);
+
+const form = ref({
+    name: "",
+    description: "",
+});
+
+const closeModal = () => {
+    emit("close");
+};
+
+const handleCreate = () => {
+    if (form.value.name.trim()) {
+        emit("create", form.value);
+        form.value = { name: "", description: "" };
+    }
+};
+</script>
+
+<style scoped></style>