website/src/components/SmallCard.astro

---
import markdownToText from "@helpers/markdownToText";
import { useTranslatedPath } from "@i18n/utils";

const tp = useTranslatedPath(Astro.url);

interface Props {
  post: {
    data: {
      title: string;
      description?: string;
      icon?: string;
      tags?: string[];
    };
    collection: string;
    body: string;
    slug: string;
  };
}

const { post } = Astro.props;
---

<a
  href={tp(`/${post.collection}/${post.slug.split("/")[0]}`)}
  class="rounded-diag-md border border-neutral p-4 overflow-hidden"
>
  <h2
    class="text-2xl flex gap-2 items-center line-clamp text-ellipsis overflow-hidden"
  >
    {post.data.icon && <img src={post.data.icon} class="h-6" />}
    {post.data.title}
  </h2>
  <p class="text-ellipsis overflow-hidden line-clamp-2">
    {post.data.description || markdownToText(post.body).slice(0, 200)}
  </p>
  {
    post.data.tags && (
      <div class="flex gap-2 mt-2">
        {post.data.tags.map((tag) => (
          <span class="text-xs border border-neutral p-2 rounded-md">
            {tag}
          </span>
        ))}
      </div>
    )
  }
</a>