src/lib/components/comments/Comment.svelte

<script lang="ts">
	import type { CommentType } from "$lib/type";
  import { userStore } from "$lib/stores/use-user";

  export let comment: CommentType;

  const formatDate = (date: string) => {
    const d = new Date(date);
    return `${d.toLocaleDateString()} ${d.toLocaleTimeString()}`;
  }

  const isMe = comment?.user?.sub === $userStore?.sub;
</script>

<div
  class="flex items-start justify-start gap-3 w-full"
  class:flex-row-reverse={isMe}
>
  <img src={comment?.user?.picture?.startsWith('http') ? comment?.user?.picture : `https://huggingface.co${comment?.user?.picture}`} class="w-10 h-10 rounded-full object-cover" alt={comment?.user?.name} />
  <div class="w-full lg:max-w-max">
    <div class="flex items-center justify-between mb-2 gap-6" class:flex-row-reverse={isMe}>
      <p class="text-neutral-200 font-semibold text-base truncate flex items-center justify-start gap-2" class:flex-row-reverse={isMe}>
        {comment?.user?.name}
        <span class="italic text-neutral-500 text-xs font-light">({comment?.user?.preferred_username})</span>
      </p>
      <p class="text-xs text-neutral-600">{formatDate(comment?.createdAt)}</p>
    </div>
    <p
      class="bg-neutral-800 bg-opacity-60 rounded-xl text-white/70 text-sm p-4"
      class:!bg-blue-500={isMe}
    >
      {comment.text}
    </p>
  </div>
</div>