strand/src/lib/GymProgress.svelte

<script lang="ts">
    import { gym, currentView } from "./store";
    const remaining = $gym.length;
    let done = $derived($gym.filter((c) => c.completed).length);

    const back = () => {
        currentView.update((_) => 0);
    };
</script>

<header>
    <button class="clickable back" onclick={() => back()}>←</button>
    <h1>
        Gym {done}/{remaining}
    </h1>
</header>
<main>
    <progress hidden max={remaining} value={done}></progress>
    <div class="calendar">
        {#each $gym as col}
            <article class="clickable">
                <label>
                    <input type="checkbox" bind:checked={col.completed} />
                    <strong>{col.name}</strong>
                    <small>{col.planned_at}</small>
                </label>
            </article>
        {/each}
    </div>
</main>

<style>
    main {
        background-color: #f62b5a;
        border-top: 4px solid rgba(0, 0, 0, 0.2)
    }

    article:nth-child(1) {
        grid-column: 3;
    }
</style>