src/lib/components/models/drawer/comments/Comments.svelte

<script lang="ts">
  import { error } from "$lib/utils/toaster";

  import Button from "$lib/components/Button.svelte";
	import type { ModelCard, CommentType } from "$lib/type";
  import Comment from "./Comment.svelte";

  export let comments: CommentType[] = [];
  export let model: ModelCard;

  let text = "";
  let loading = false;

  const handleSubmit = async () => {
    loading = true;
    const comment_request = await fetch(`/api/models/${model?.id?.replace("/", "@")}/comments`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ text }),
    });

    const comment_response = await comment_request.json();
    if (comment_response.error) {
      error(comment_response.error)
    } else {
      comments = [comment_response.comment, ...comments];
      text = "";
    }
    loading = false;
  }

  const handleChange = async (event: any) => {
    text = event.target.value;
  }
</script>

<div>
  <div class="grid grid-cols-1 gap-3">
    {#if comments?.length === 0}
      <p class="text-neutral-500 text-sm">No comments yet! Be the first one!</p>
    {/if}
    {#each comments as comment}
      <Comment comment={comment} />
    {/each}
  </div>
  <div class="flex gap-4 items-start justify-between flex-col lg:flex-row mt-7">
    <textarea
      value={text}
      class="rounded-xl bg-neutral-900 text-neutral-200 text-base placeholder:text-neutral-500 outline-none resize-none p-4 w-full"
      placeholder="Write a comment..."
      on:input={handleChange}
    />
    <Button
      theme="blue"
      size="md"
      icon="carbon:send-alt-filled"
      iconPosition="right"
      loading={loading}
      disabled={text.length < 3}
      onClick={handleSubmit}
    >
      Post
    </Button>
  </div>
</div>