---
import { getCollection } from 'astro:content';
import BaseLayout from '@/layouts/BaseLayout.astro';
import Heading from '@/components/ui/Heading.astro';
const allBlogposts = await getCollection('blog');
---

<BaseLayout title="Blog">
	<div class="container mx-auto px-4 py-16 sm:py-24 lg:px-8 lg:py-32 xl:max-w-7xl">
		<div class="mb-12 text-center text-zinc-900 dark:text-zinc-200">
			<Heading level={1}>Blog</Heading>
			<p>Here are some blogposts, they are located in the repository as mdx files.</p>
		</div>
		<hr class="mb-12 dark:border-zinc-700/75" />
		<div class="grid grid-cols-1 gap-8 md:grid-cols-2">
			{
				allBlogposts.map((post) => (
					<div class="flex flex-col space-y-4">
						<h2 class="text-lg font-semibold text-zinc-800 hover:text-zinc-600 dark:text-zinc-200 dark:hover:text-zinc-400 sm:text-xl">
							<a href={`/blog/${post.slug}`}>{post.data.title}</a>
						</h2>
						<p class="text-sm leading-relaxed text-zinc-600 dark:text-zinc-400">
							{post.data.description}
						</p>
						<a
							class="text-sm font-medium text-primary-600 hover:text-primary-400 dark:text-primary-400 dark:hover:text-primary-300"
							href={`/blog/${post.slug}`}>
							Read more
						</a>
					</div>
				))
			}
		</div>
	</div>
</BaseLayout>