Tarea - Página para mostrar todas las entradas de un autor

author.astro

---
import MainLayout from '../../layouts/MainLayout.astro';

const { blogPosts, author } = Astro.props;
---

<MainLayout>
  <section class="bg-gray-900">
    <div class="container px-6 py-10 mx-auto">
      <h1 class="text-3xl font-semibold capitalize lg:text-4xl text-white">
        {siteConfig.title}
      </h1>

      <div class="text-md text-gray-400 mb-0 flex flex-row mt-2">
        <Image
          class="rounded-full"
          src={author.avatar}
          alt={author.name}
          width={50}
          height={50}
        />

        <div class="flex flex-col ml-5">
          <a>{author.name}</a>
          <span>Listado de todos mis posts</span>
        </div>
      </div>

      <div class="grid grid-cols-1 gap-8 mt-8 md:mt-16 md:grid-cols-2">
        {blogPosts.map((post) => <TypedBlogPost post={post} />)}
      </div>
    </div>
  </section>
</MainLayout>

<style is:global>
  a {
    @apply text-blue-500 hover:underline;
  }
</style>