---
import type { CollectionEntry, CollectionKey } from "astro:content";

interface Props {
  collectionName: CollectionKey;
  categoryName: string;
  posts: Array<CollectionEntry<CollectionKey>>;
}
const { collectionName, categoryName, posts } = Astro.props;
---

<h1>{categoryName}</h1>
<ul>
  {
    posts.map((post) => (
      <li>
        <a href={`/article/${collectionName}/${post.slug}`} target="_blank">
          {post.data.title}
        </a>
      </li>
    ))
  }
</ul>

<style>
  ul {
    padding: 0;
    list-style-type: none;
  }
  h1 {
    margin: 0.5em 0 0 0;
  }
</style>