<script>
	import { each } from 'svelte/internal';
	import Card from './Card.svelte';
	import ModalCard from './ModalCard.svelte';
	let exos = [
		{
			title: 'test1',
			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
			tags: []
		},
		{
			title: 'test2',
			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
			tags: []
		},
		{
			title: 'test3',
			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
			tags: []
		},
		{
			title: 'test1',
			examples: ['an example', 'an example', 'an example', 'an example', 'an example'],
			tags: []
		}
	];
</script>

<div class="feed">
	<div class="title">
		<h1>
			Tous les <span>exercices</span>
		</h1>
		<p>
			Vous retrouverez ici tous les exercices que vous avez créé ou copié depuis les exercices
			publics
		</p>
	</div>
	{#each exos as e}
		<Card examples={e.examples} title={e.title} tags={e.tags} />
	{/each}
</div>

<style lang="scss">
	.feed {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
		grid-auto-flow: dense;
		grid-gap: 32px;
		margin: 0 auto;
	}

	.title {
		grid-column: 1/3;
		display: flex;
		text-align: left;
		justify-content: center;
		flex-direction: column;
		h1 {
			font-size: 3.5em;
			font-weight: bolder;
			margin: 0;
		}
		p {
			font-size: 1.1em;
		}
		span {
			color: red;
		}
	}
</style>
