<script lang="ts">
	import type { PageData } from './$types';
	import PostCard from '$lib/components/PostCard.svelte';

	let { data }: { data: PageData } = $props();
</script>

<svelte:head>
	<title>blog - jawhng.xyz</title>
</svelte:head>

<div class="mx-auto max-w-4xl px-4 py-12">
	<h1 class="mb-8 text-5xl font-bold">Always off-topic</h1>

	<div class="space-y-6">
		{#each data.posts as post}
			<PostCard
				slug={post.slug}
				title={post.title}
				date={post.date}
				excerpt={post.excerpt}
				image={post.image}
			/>
		{/each}
	</div>
</div>
