---
import Default from '../layouts/Default.astro';
import { api } from '../lib/api.ts';

const data = await api('get', 'boards');
const boards: string[] = await data.json();
---

<Default>
  <div class="blackbox">
    <h3>Boards</h3>

    <ul>
      {boards.map((board) => (
      <li><a href=`/board/${board}`>{board}</a></li>
      ))}
    </ul>
  </div>
</Default>

<style>
  .blackbox {
    width: 300px;
    height: 210px;
    border: 10px solid black;
    padding: 10px;
    padding-top: 0px;
    margin: 10px;
    margin-left: 0px;
    background-color: white;
  }
</style>