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'
	import OpenDiscussion from '$lib/components/OpenDiscussion.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-3xl mx-auto px-4 py-12 pb-32">
	<h1 class="text-6xl mt-10 font-bold text-center tracking-tight text-slate-800 mb-8">{config.title}</h1>
	<p class="text-lg text-center text-slate-600">{config.description}</p>
	<p class="text-lg text-center text-slate-600 mb-8">Open a discussion to request a new snippet.</p>
	<div class="flex justify-center mb-16">
		<OpenDiscussion href="https://huggingface.co/spaces/cfahlgren1/sql-snippets/discussions/new?title=Request+for+a+new+snippet%3A" />
	</div>

	<ul class="space-y-12">
		{#each data.snippets as snippet}
			<li class="bg-white rounded-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>