classroomio/apps/website/src/lib/components/blog-list-item.svelte

<script>
  import { Badge } from '@cio/ui/base/badge';
  import { formatDate } from '$lib/utils/format-date';

  export let post;
  export let isRecommended = false;
</script>

{#if !isRecommended}
  <div class="mb-5 flex md:flex-row flex-col md:items-center gap-2">
    <!-- Date -->
    <p class="text-sm text-slate-500">{formatDate(post.date)}</p>

    <!-- Tags  -->
    <div class="flex flex-col">
      <div class="flex flex-wrap gap-2">
        {#each post.tags as tag}
          <Badge variant="outline">{tag}</Badge>
        {/each}
      </div>
    </div>
  </div>
{/if}

<a href="/blog/{post.slug}" class="group">
  <img
    loading="lazy"
    src={post.imageUrl}
    alt={post.title}
    class="w-70 h-48 object-cover rounded-md"
  />
  <p
    class="font-bold text-lg py-2 {isRecommended &&
      'h-[60px]'} line-clamp-2 group-hover:text-slate-500"
  >
    {@html post.title}
  </p>

  <p class="text-slate-500 pt-2 mb-4 line-clamp-3">{post.description}</p>
</a>

<div class="flex items-center justify-start gap-4 my-2">
  <img loading="lazy" src={post.avatar} alt="avatar" class="w-10 h-10 rounded-full" />
  <span>
    <p class="font-semibold">{post.author}</p>
    <p class="text-slate-500">{post.role}</p>
  </span>
</div>