---
import type { Post } from "@/types/post";
import IndexSidebar from "@/components/IndexSidebar.astro";
import PostList from "@/components/PostList.astro";

interface Props {
  posts: Post[];
  page: number;
  totalPage: number;
}

const { posts, page, totalPage } = Astro.props;
---

<div class="page-content">
  <div class="container">
    <PostList posts={posts} page={page} totalPage={totalPage} />
    <IndexSidebar />
  </div>
</div>

<style>
  .container {
    width: 100%;
    display: flex;
    gap: 28px;
  }

  @media (max-width: 860px) {
    .container {
      flex-direction: column;
    }
  }
</style>