stufflog2/svelte-ui/src/components/QLList.svelte

<script lang="ts">
  import type { ProjectResult } from "../models/project";
  import QlListItem from "./QLListItem.svelte";

  export let projects: ProjectResult[];
  export let label: string = "";
  export let selected: string | null = null;
</script>

{#if projects.length > 0}
  <div class="ql-list">
    <h2>{label}</h2>
    {#each projects as project (project.id)}
      <QlListItem selected={project.id === selected} project={project} />
    {/each}
  </div>
{/if}

<style>
  div.ql-list {
    margin: 1em 0;
  }

  h2 {
    font-weight: 100;
    margin: 0;
    padding-bottom: 0.125em;
  }
</style>