comments : prepare new comment working

src/components/comments/Comments.vue

@@ -0,0 +1,77 @@
+<template>
+  <aside id="comments-container" aria-labelledby="comments-label">
+    <h2 id="comments-label" class="sr-only">Commentaires</h2>
+    <div class="comments | flow">
+      <article class="comment | flow" data-status="unread">
+        <header>
+          <p>
+            <strong>François</strong>
+            <span class="comment__id">#1</span> •
+            <span class="comment__page">Page 12</span>
+            <time datetime="2024-10-22">Hier</time>
+          </p>
+        </header>
+        <p class="comment__body">
+          Lectus adipiscing nulla quis odio in aliquam. Adipiscing libero in
+          consequat porta mauris hendrerit malesuada viverra turpis.
+        </p>
+      </article>
+    </div>
+    <button
+      id="add-comment"
+      class="btn btn--white-20 | w-full"
+      @click="isAddOpen = true"
+    >
+      Ajouter un commentaire
+    </button>
+
+    <form
+      v-if="isAddOpen"
+      action=""
+      method="post"
+      class="flow"
+      @submit="addComment"
+    >
+      <label class="sr-only" for="comment">Votre commentaire</label>
+      <textarea
+        name="comment"
+        id="comment"
+        placeholder="Ajouter un commentaire"
+        rows="3"
+        class="text-sm | rounded-lg bg-black p-12"
+        v-model="newCommentText"
+      ></textarea>
+      <footer class="flex">
+        <button class="btn btn--white-20">Annuler</button>
+        <input type="submit" class="btn btn--tranparent" />
+      </footer>
+    </form>
+  </aside>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useUserStore } from "../../stores/user";
+import dayjs from "dayjs";
+
+const { currentPage } = defineProps({
+  currentPage: Number,
+});
+const { user } = useUserStore();
+
+const newCommentText = ref("");
+
+const isAddOpen = ref(false);
+
+// Functions
+function addComment(event) {
+  event.preventDefault();
+  const comment = {
+    userUuid: user.uuid,
+    text: newCommentText.value,
+    page: currentPage,
+    date: dayjs().format(),
+  };
+  console.log(comment);
+}
+</script>