<script>
  import Conversation from '$lib/components/Conversation.svelte';

  let id = $state('Czero');
  let name = $state('a long conversation');
  let active = $state(false);
  let hasUnreads = $state(false);
</script>

<h1><code>Conversation</code></h1>

<nav><p><a href=".">Back to swatches</a></p></nav>

<h2>properties</h2>

<div class="component-properties">
  <label>id <input type="text" bind:value={id} /></label>
  <label>name <input type="text" bind:value={name} /></label>
  <label>active <input type="checkbox" bind:checked={active} /></label>
  <label>has unreads <input type="checkbox" bind:checked={hasUnreads} /></label>
</div>

<h2>rendered</h2>

<div class="component-preview">
  <nav class="list-nav">
    <ul>
      <Conversation {id} {name} {active} {hasUnreads} />
    </ul>
  </nav>
</div>
