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 | 4) => {
    currentView.update((_) => v);
  };
</script>

<main>
<h1>Dags att komma i form!</h1>
<div class="cards">
  <button class="clickable gym" onclick={() => navigate(1)}>
    <i>{gymProgress}</i> / {$gym.length} <span>Styrketräning</span>
  </button>
  <button class="clickable cardio" onclick={() => navigate(2)}>
    <i>{cardioProgress}</i> / {$cardio.length}
    <span>Konditionsträning</span>
  </button>
  <button class="clickable diet" onclick={() => navigate(3)}>
    <i>{dietProgress}</i> / {$diet.days.length}
    <span>Dietdagar</span>
  </button>
  <button class="clickable info" onclick={() => navigate(4)}>
    <i>?</i>
    <span>Va?</span>
  </button>
</div>
</main>

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

    button {
      padding: 1.5em;

      &:hover {
        filter: brightness(95%);
      }
    }

    .gym {
      background-color: #f62b5a;
      color: #fff;
    }

    .cardio {
      background-color: #5dc5f8;
      color: #000;
    }

    .diet {
      background-color: #35d450;
      color: #fff;
    }

    .info {
      background-color: #ff0;
      color: #000;
    }

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

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