---
import PostPreview from "../components/PostPreview.astro";
import type { Settings, Post } from "@matthiesenxyz/astro-ghostcms/api";
export type Props = {
  posts: Post[];
  settings: Settings;
  isHome?: boolean;
};
const { posts, settings, isHome = false } = Astro.props as Props;
---

<div class="post-feed">
  {posts.map((post: Post, index: number) => (
    <PostPreview
      post={post}
      index={index}
      settings={settings}
      isHome={isHome}
    />
  ))}
</div>

<style lang="scss">
  .post-feed {
    position: relative;
    display: grid;
    grid-gap: 4vmin;
    grid-template-columns: 1fr 1fr 1fr;
    padding: 4vmin 0;
  }

  @media (max-width: 1000px) {
    .post-feed {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 700px) {
    .post-feed {
      grid-template-columns: 1fr;
      grid-gap: 40px;
    }
  }
</style>
