src/lib/components/community/drawer/Comments.svelte

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

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

  export let comments: CommentType[] = [];
  export let gallery: CommunityCard;

  let text = "";
  let loading = false;
  let collapse_comments = false;

  const handleSubmit = async () => {
    loading = true;
    const comment_request = await fetch(`/api/community/${gallery?.id}/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 class="grid grid-cols-1 gap-3 overflow-auto h-full max-h-[50%]">
  {#if comments?.length === 0}
    <p class="text-neutral-500 text-sm">No comments yet! Be the first one!</p>
  {/if}
  {#each comments.slice(0, collapse_comments ? comments?.length : 1) as comment}
    <Comment comment={comment} />
  {/each}
  {#if comments?.length > 1}
    <div class="flex items-center justify-start max-w-max absolute right-8 top-8 pointer-events-auto z-[10]">
      <Button
        theme="dark"
        onClick={(e) => {
          e.preventDefault();
          e.stopPropagation();
          collapse_comments = !collapse_comments;
        }}
      >
        {collapse_comments ? "Show less" : `Show more (${comments?.length - 1})`}
      </Button>
    </div>
  {/if}
</div>
<div class="flex gap-4 items-start justify-between flex-col lg:flex-row mt-7 sticky bottom-0">
  <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 about this image. Reminder: This is not the right place to generate images."
    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>