add PostGrid component

src/components/PostGrid.astro

@@ -0,0 +1,27 @@
+---
+import type { Post } from "../types/global";
+import PostPreviewSmall from "./PostPreviewSmall.astro";
+
+interface Props {
+  posts: Array<Post>;
+}
+
+const { posts } = Astro.props;
+---
+
+<div class="post-grid">
+  {
+    posts.map((post_file: any) => (
+      <PostPreviewSmall url={post_file.url} post={post_file.frontmatter} />
+    ))
+  }
+</div>
+
+<style>
+  .post-grid {
+    padding: 24px 24px;
+    display: flex;
+    gap: 32px;
+    flex-wrap: wrap;
+  }
+</style>

src/pages/index.astro

@@ -1,14 +1,14 @@
 ---
 import Main from "../layouts/Main.astro";
-import PostPreviewSmall from "../components/PostPreviewSmall.astro";
 import PostPreviewLarge from "../components/PostPreviewLarge.astro";
+import PostGrid from "../components/PostGrid.astro";
 
 const allPosts: Array<any> = Object.values(
   import.meta.glob("./posts/*.md", { eager: true })
 );
 
+const posts = allPosts.slice(0, allPosts.length - 1)
 const mostRecentPost = allPosts.at(allPosts.length - 1);
-console.log(mostRecentPost)
 ---
 
 <Main title="Startseite">
@@ -16,22 +16,5 @@ console.log(mostRecentPost)
     url={mostRecentPost.url}
     post={mostRecentPost.frontmatter}
   />
-  <div class="post-grid">
+ <PostGrid posts={posts} />
-    {
-      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>