Render tag pages with card grid layout (#1159)

* Initial plan

* Update tag page layout to match posts page with LinkPreview card grid

Co-authored-by: maiertech <1482402+maiertech@users.noreply.github.com>

* Initial plan

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: maiertech <1482402+maiertech@users.noreply.github.com>

Author: Copilot

src/routes/tags/[id]/+page.svelte

@@ -1,21 +1,24 @@
 <script lang="ts">
+	import { H1, LinkPreview } from '@maiertech/sveltekit-helpers';
 	import type { PageProps } from './$types';
 
 	let { data }: PageProps = $props();
-</script>
 
-<h1 class="text-gradient">{data.seo.title}</h1>
+	const links = $derived.by(() =>
+		data.posts.map((post) => ({
+			href: post.path,
+			title: post.title,
+			description: post.description
+		}))
+	);
+</script>
 
-<ul>
-	{#each data.posts as post (post.path)}
-		<li>
-			<a href={post.path}>{post.title}</a>
-		</li>
-	{/each}
-</ul>
+<H1 class="mb-8">{data.seo.title}</H1>
 
-<style>
-	h1 {
-		margin-bottom: var(--size-fluid-2);
-	}
-</style>
+<div class="@container">
+	<div class="grid grid-cols-1 gap-5 @lg:grid-cols-2 @4xl:grid-cols-3">
+		{#each links as link (link.href)}
+			<LinkPreview value={link} />
+		{/each}
+	</div>
+</div>