strand/src/lib/Summary.svelte

<script lang="ts">
    import { gym, cardio, diet, currentView } from "./store";
    let gymProgress = $derived($gym.filter((c) => c.completed).length);
    let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
    let dietProgress = $derived($diet.days.filter((c) => c.completed).length);

    const navigate = (v: 0 | 1 | 2 | 3) => {
        currentView.update((_) => v);
    };
</script>

<div>
    <h1>Summary</h1>
    <ul class="cards">
        <li>
            <button onclick={() => navigate(1)}>
                <i>{gymProgress}</i> / {$gym.length} <span>gympass gjorda</span>
            </button>
        </li>
        <li>
            <button onclick={() => navigate(2)}>
                <i>{cardioProgress}</i> / {$cardio.length}
                <span>löppass lufsade</span>
            </button>
        </li>
        <li>
            <button onclick={() => navigate(3)}>
                <i>{dietProgress}</i> / {$diet.days.length}
                <span>dagar på diet</span>
            </button>
        </li>
    </ul>
</div>

<style>
    .cards {
        list-style: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1em;

        > li {
            flex: 1;
            border: 2px solid #aaa;
            border-radius: 5px;
            padding: 0;

            button {
                padding: 1em;
            }

            i {
                font-size: 2em;
                font-style: normal;
            }

            span {
                display: block;
            }
        }
    }
</style>