<script>
	import Logos from '$lib/language-logos/Logos.svelte';
	import EmptyCard from './cards/EmptyCard.svelte';
	import ProjectCard from './cards/ProjectCard.svelte';

	async function getProjects() {
		const res = await fetch('/projects/all');
		const json = await res.json();
		console.log(json);
		return json;
	}
</script>

{#await getProjects()}
	<EmptyCard>
		<p class="message">Fetching Projects...</p>
	</EmptyCard>
{:then projects}
	{#each projects as project}
		<ProjectCard {project} />
	{/each}
{:catch}
	<EmptyCard>
		<p class="message">Unable to fetch projects</p>
	</EmptyCard>
{/await}

<style>
	.message {
		color: var(--light-text-color);
	}
</style>
