---
import '../styles/blackbox.css'
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 title="Boards">
  <h1>Boards</h1>

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

<style is:inline>
  :root {
    --wdt: 300px;
    --ml: 0px;
  }
</style>