---
import Main from "../layouts/Main.astro";
import PostPreviewSmall from "../components/PostPreviewSmall.astro";
import PostPreviewLarge from "../components/PostPreviewLarge.astro";

const allPosts: Array<any> = Object.values(
  import.meta.glob("./posts/*.md", { eager: true })
);

const mostRecentPost = allPosts.at(allPosts.length - 1);
console.log(mostRecentPost)
---

<Main title="Startseite">
  <PostPreviewLarge
    url={mostRecentPost.url}
    post={mostRecentPost.frontmatter}
  />
  <div class="post-grid">
    {
      allPosts
        .slice(0, allPosts.length - 1)
        .map((post_file: any) => (
          <PostPreviewSmall url={post_file.url} post={post_file.frontmatter} />
        ))
    }
  </div>
</Main>

<style>
  .post-grid {
    padding: 24px 24px;
    display: flex;
    gap: 32px;
    flex-wrap: wrap;
  }
</style>