Create swatch for the `LogIn` component.

2 files changed, 32 insertions, 0 deletions

diff --git a/ui/routes/(swatch)/.swatch/+page.svelte b/ui/routes/(swatch)/.swatch/+page.svelte
index abcb53f..9484cf9 100644
--- a/ui/routes/(swatch)/.swatch/+page.svelte
+++ b/ui/routes/(swatch)/.swatch/+page.svelte
@@ -8,5 +8,6 @@
 <h2>components</h2>
 
 <ul>
+  <li><a href="LogIn">LogIn</a></li>
   <li><a href="swatch/EventLog">swatch/EventLog</a></li>
 </ul>
diff --git a/ui/routes/(swatch)/.swatch/LogIn/+page.svelte b/ui/routes/(swatch)/.swatch/LogIn/+page.svelte
new file mode 100644
index 0000000..8501a6c
--- /dev/null
+++ b/ui/routes/(swatch)/.swatch/LogIn/+page.svelte
@@ -0,0 +1,31 @@
+<script>
+  import EventCapture from '$lib/swatch/event-capture.svelte.js';
+
+  import EventLog from '$lib/components/swatch/EventLog.svelte';
+  import LogIn from '$lib/components/LogIn.svelte';
+
+  let legend = $state('sign in');
+
+  let capture = $state(new EventCapture());
+  const logIn = capture.on('logIn');
+</script>
+
+<h1><code>LogIn</code></h1>
+
+<nav><p><a href=".">Back to swatches</a></p></nav>
+
+<h2>properties</h2>
+
+<div class="component-properties">
+  <label>legend <input type="text" bind:value={legend} /></label>
+</div>
+
+<h2>rendered</h2>
+
+<div class="component-preview">
+  <LogIn {legend} {logIn} />
+</div>
+
+<h2>events</h2>
+
+<EventLog events={capture.events} clear={capture.clear.bind(capture)} />