<script>
    import {onMount} from 'svelte';
    import Thumb from '../components/thumbnail.svelte'
    import Banner from '../components/banner.svelte'

    let games = [
        {
            name: "Sirius",
            link: "./sirius",
            img: "https://placehold.it/600x300",
            size: { width: 600, height: 300 },
            description: "A 2D game about a wannabe space captain exploring the galaxy.",
        },
        {
            name: "Quartz",
            link: "./sirius",
            img: "https://placehold.it/600x300",
            size: { width: 600, height: 300 },
            description: ""
        }
    ]

    onMount(async () => {

    });
</script>

<style>
    section {
        border-radius: 5px;
        padding: 5px 20px;
    }

    main {
        margin-top: 30px;
    }
</style>

<svelte:head>
    <title>Quartznet</title>
</svelte:head>

<Banner/>

<main class="container">
    <section>
        {#each games as game}
            <Thumb {...game}/>
        {/each}
    </section>
</main>
