src/routes/+page.svelte

<script lang="ts">
	import * as config from '$lib/config'
	import type { Snippet } from '$lib/types'
	import CodeBlock from '$lib/components/CodeBlock.svelte'

	export let data: { snippets: Snippet[] }
</script>

<svelte:head>
	<title>{config.title} in DuckDB</title>
	<meta name="description" content="A collection of snippets for DuckDB." />
</svelte:head>

<section class="max-w-2xl mx-auto px-4 py-8 pb-32">
	<h1 class="text-5xl mt-10 font-bold text-center tracking-tight text-slate-800 mb-8">{config.title}</h1>
	<p class="text-base text-center text-slate-600 mb-8">{config.description}</p>
	<ul class="space-y-12">
		{#each data.snippets as snippet}
			<li class="bg-whiterounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
				<div class="p-4">
					<a href={`${snippet.slug}`} class="block mb-4 hover:underline transition-colors duration-300">
						<h2 class="text-2xl font-bold transition-colors duration-300">{snippet.title}</h2>
					</a>
					<p class="text-sm text-slate-700 font-mono mb-6">{snippet.description}</p>
					{#if snippet.code}
						<CodeBlock code={snippet.code} language="sql" />
					{/if}
				</div>
			</li>
		{/each}
	</ul>
</section>