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

	export let data: PageData;
</script>

<svelte:head>
	<title>Projects</title>
	<meta name="description" content="projects" />
</svelte:head>

<div>
	<h1>Projects</h1>

	<p>This is the page where all projects will live</p>

	<hr />

	<section class="project_list">
		{#each data.data as { title, description, path, date, tags }}
			<Card data={{ title, description, path, date, tags }} />
		{/each}
	</section>
</div>

<style lang="css">
	.project_list {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		gap: 1rem;
	}
</style>
