---
import { getCollection } from 'astro:content';

import Layout from '@layouts/Layout.astro';
import PostPreview from '@components/PostPreview.astro';

const posts = await getCollection('blog');
---

<Layout title="Home">
	{
		posts
			.sort(
				(a, b) =>
					new Date(b.data.pubDate).valueOf() -
					new Date(a.data.pubDate).valueOf()
			)
			.slice(0, 6)
			.map((post) => <PostPreview post={post} />)
	}
	{
		posts.length < 6 ? null : (
			<div class="more-posts">
				<a href="/archive/all">All Posts</a>
			</div>
		)
	}
</Layout>

<style>
	.more-posts {
		text-align: center;
	}
</style>
