feat: minimum working comments app

resources/ts/App.vue

@@ -1,7 +1,36 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onBeforeMount } from "vue";
+import { getComments, postComment } from "@/api/comments";
+import type { Comment } from "@/types";
 
 const visible = ref<boolean>(false);
+const comments = ref<Comment[]>([]);
+const commentInput = ref<string>("");
+
+function fetchComments() {
+    getComments()
+        .then((data: Comment[]) => {
+            comments.value = data;
+        })
+        .catch(() => {
+            //ignore
+        });
+}
+
+function sendComment() {
+    if (commentInput.value.trim()) {
+        postComment(commentInput.value.trim())
+            .finally(() => {
+                commentInput.value = "";
+                fetchComments();
+            })
+            .catch(() => {
+                //ignore
+            });
+    }
+}
+
+onBeforeMount(fetchComments);
 
 onMounted(() => {
     setTimeout(() => {
@@ -15,13 +44,55 @@ onMounted(() => {
         <div class="hero bg-base-200 min-h-screen">
             <div class="hero-content text-center">
                 <div class="max-w-md">
-                    <h1 class="text-5xl font-bold">Hello there</h1>
-                    <p class="py-6">
-                        Provident cupiditate voluptatem et in. Quaerat fugiat ut
-                        assumenda excepturi exercitationem quasi. In deleniti
-                        eaque aut repudiandae et a id nisi.
-                    </p>
-                    <button class="btn btn-primary">Get Started</button>
+                    <ul class="list bg-base-100 rounded-box shadow-md">
+                        <li class="p-4 pb-2 text-xl opacity-60 tracking-wide">
+                            Comments
+                        </li>
+
+                        <li
+                            v-for="comment in comments"
+                            :key="comment.id"
+                            class="list-row"
+                        >
+                            <div class="avatar avatar-placeholder">
+                                <div
+                                    class="bg-neutral text-neutral-content size-10 rounded-box"
+                                >
+                                    <span class="text-xs">{{
+                                        comment.content[0]
+                                    }}</span>
+                                </div>
+                            </div>
+                            <div>
+                                <div class="text-xs opacity-60">
+                                    {{ comment.created_at }}
+                                </div>
+                                <div class="font-semibold">
+                                    {{ comment.content }}
+                                </div>
+                            </div>
+                        </li>
+                        <li class="list-row">
+                            <div>
+                                <input
+                                    v-model="commentInput"
+                                    type="text"
+                                    placeholder="Type here"
+                                    class="input"
+                                    @keyup.enter="sendComment"
+                                />
+                            </div>
+                            <div>
+                                <button
+                                    class="btn"
+                                    :disabled="commentInput.trim().length === 0"
+                                    @click="sendComment"
+                                >
+                                    Send
+                                </button>
+                            </div>
+                        </li>
+                    </ul>
                 </div>
             </div>
         </div>