bgg-ottawa-sell-club/src/routes/+page.svelte

<article>
<h1>Ottawa board games for sale</h1>

<p>This is a list of games for sale or trade of people living in the Ottawa
    region, taken from their profiles on 
        <a href="https://boardgamegeek.com">Board Game Geek</a>.
</p>

 <header >
            <Search {handler} />
 </header>

<table>
    <thead>
        <tr>
            <th>user</th>
            <th></th>
            <th>game</th>
            <th></th>
            <th>notes</th>
            <th>price</th>
        </tr>
    </thead>
    <tbody>
        {#each $rows as row}
            <tr>
                <td><a target="_top" href={`https://boardgamegeek.com/user/${row.username}`}>{row.username}</a></td>
                <td><a
                    target="_top"
                    href={`https://boardgamegeek.com/geekmail/compose?touser=${row.username}`}>bgg
                    mail</a></td>
                <td> <a
                    target="_top"
                    href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
                        {row.name}</a>
                </td>
                <td>
                 <a
                    target="_top"
                    href={`https://boardgamegeek.com/boardgame/${row.bgg_id}`}>
                     <img src={row.thumbnail} height="60"/></a>
                </td>
                <td>{row.notes}</td>
                <td>{row.price??''}</td>
            </tr>
        {/each}
    </tbody>
</table>
</article>


<script> 
    // TODO BGG mail the user 
    // TODO add cart
    // prettify
    import { DataHandler, Search } from '@vincjo/datatables'

    export let data;

    const handler = new DataHandler(data.games, { rowsPerPage: 50 })
    const rows = handler.getRows()
</script>

<style> 
    :global(:root) {
        --font-size-10: 1rem;
        --font-size-11: 1.5rem;
        --font-size-12: 1.75rem;
        --font-size-13: 2rem;
        --font-size-14: 2.25rem;
    }
    p {
        font-size: var(--font-size-10);
    }
    a {
        color: var(--primary);
        text-decoration: underline;
    }
</style>