project creation request form working

src/components/Btn.vue

@@ -1,11 +0,0 @@
-<template>
-  <button :data-size="size">Label</button>
-</template>
-
-<script setup>
-const { size } = defineProps({
-  size: String,
-});
-</script>
-
-<style scoped></style>

src/components/ProjectRequestButton.vue

@@ -0,0 +1,11 @@
+<template>
+  <button class="btn">Demander la création d'un projet</button>
+</template>
+
+<style scoped>
+button {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+}
+</style>

src/components/ProjectRequestDialog.vue

@@ -0,0 +1,61 @@
+<template>
+  <form @submit.prevent="handleSubmit">
+    <input type="text" v-model="title" placeholder="Nom du projet" required />
+    <textarea
+      name="details"
+      v-model="details"
+      cols="30"
+      rows="10"
+      placeholder="Détails du projet"
+      required
+    ></textarea>
+    <input type="checkbox" v-model="isDTLEnabled" />
+    <button type="submit">Soumettre</button>
+  </form>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useApiStore } from "../stores/api";
+
+const title = ref("");
+const details = ref("");
+const isDTLEnabled = ref(false);
+const api = useApiStore();
+
+async function handleSubmit() {
+  const formData = {
+    title: title.value,
+    details: details.value,
+    isDTLEnabled: isDTLEnabled.value,
+  };
+
+  const response = await api.requestProjectCreation(formData);
+}
+</script>
+
+<style scoped>
+form {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  z-index: 999;
+  background-color: #000;
+  color: #fff;
+}
+
+button {
+  color: #fff;
+}
+
+input,
+textarea {
+  background-color: #fff;
+  color: #000;
+}
+
+input[type="checkbox"] {
+  width: 1rem;
+  height: 1rem;
+}
+</style>