toggle — the native checkbox, painted as a switch

<script lang="ts">
  import PressButton from '@ui/press-button.svelte';
  import TerminalCard from '@ui/terminal-card.svelte';
  import Toggle from '@ui/toggle.svelte';
</script>

let beta = $state(false);
let result = $state<{ outputs: string[] } | null>(null);

function onSubmit(event: SubmitEvent) {
  event.preventDefault();
  const data = new FormData(event.currentTarget as HTMLFormElement);
  const outputs: string[] = [];
  for (const [key, value] of data) {
    if (typeof value === 'string' && value !== '') outputs.push(`${key}: ${value}`);
  }
  outputs.push('form submitted ✓');
  result = { outputs };
}

<div class="grid w-full gap-6 min-[900px]:grid-cols-[minmax(0,1fr)_minmax(0,0.9fr)]">
  <form class="flex flex-col gap-4" aria-label="beta channel" onsubmit={onSubmit}>
    <Toggle label="join the beta channel" name="beta" value="yes" bind:checked={beta} />
    <span class="text-muted-foreground text-[12.5px]">
      bound checked: <code class="text-accent">{String(beta)}</code> — the value rides into
      FormData as <code class="text-accent">beta=yes</code> only when on
    </span>
    <div class="flex flex-wrap items-center gap-3 pt-1">
      <PressButton type="submit" variant="fill">sign up</PressButton>
    </div>
  </form>
  <div>
    {#if result}
      {#key result}
        <TerminalCard
          barTitle="form — zsh"
          command="form.submit"
          outputs={result.outputs}
        />
      {/key}
    {:else}
      <div class="border-border bg-muted/40 text-muted-foreground flex h-full min-h-40 flex-col items-center justify-center gap-2 border p-6 text-center text-[13px]">
        <span class="font-nav text-primary text-[11px] uppercase tracking-[0.24em]">awaiting submit</span>
        <span>flip the toggle and press <code class="text-accent">sign up</code> — the FormData payload prints here</span>
      </div>
    {/if}
  </div>
</div>