AstralRinth/theseus_gui/src/components/TitledSection.svelte

<script lang="ts">
  import { Checkbox } from 'omorphia';

  export let title: string;
  export let toggleable: boolean = false;

  export let enabled: boolean = false;
</script>

<div class="section">
  <div class="section__title">
    {#if toggleable}<Checkbox bind:checked={enabled}>{title}</Checkbox>
    {:else}{title}
    {/if}
  </div>
  <div class="section__items">
    {#if !toggleable || enabled}<slot />{/if}
  </div>
</div>

<style lang="postcss">
  .section {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    grid-gap: 1rem;

    &__title {
      display: flex;
      grid-gap: 1rem;
      align-items: center;

      &::after {
        flex: 1 1;
        content: ' ';
        background-color: hsla(0, 0%, 100%, 0.2);
        height: 0.2rem;
        border-radius: var(--rounded-max);
      }
    }

    &__items {
      display: flex;
      flex-direction: column;
      grid-gap: 1rem;
      padding: 0 8px;
    }
  }
</style>