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

    export let name;

    let games = [
        {
            name: "Sirius",
            thumb: "https://placehold.it/600x300",
            description: "A 2D sci-fi game about wannabe space captain trying to find their path.",
            imgClass: "img-fluid mb-3 mb-md-0"
        },
        {
            name: "Quartz",
            thumb: "https://placehold.it/600x300",
            description: ""
        }
    ]

    onMount(async () => {

    });
</script>

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


<Banner/>

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


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

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