From 8d32464de72de6f54d2d17ae1ef25d8fb967381d Mon Sep 17 00:00:00 2001
From: Elijah Duffy <elijah@thatoneguy.ca>
Date: Tue, 1 Jul 2025 13:10:13 -0700
Subject: [PATCH] begin building demos

---
 src/routes/+layout.svelte |  2 +-
 src/routes/+page.svelte   | 47 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b93e9ba..ad9606a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,4 +4,4 @@
 	let { children } = $props();
 </script>
 
-{@render children()}
+<div class="px-8 py-4">{@render children()}</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9c42926..ec52a66 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,3 +1,44 @@
-<h1>Welcome to your library project</h1>
-<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script>
+	import Button from '$lib/Button.svelte';
+	import Combobox from '$lib/Combobox.svelte';
+</script>
+
+<h1 class="mb-4 text-3xl font-bold">sui — Opinionated Svelte 5 UI toolkit</h1>
+
+<p class="mb-4">
+	Welcome to the Svelte UI toolkit! This is a collection of components and utilities designed to
+	help you build Svelte applications quickly and efficiently.
+</p>
+
+<h2 class="mb-2 text-2xl font-semibold">Component Library</h2>
+
+<p class="comp-title">Button</p>
+<div class="flex gap-4">
+	<Button icon="add" loading={false} onclick={() => alert('Button clicked!')}>Click Me</Button>
+	<Button icon="add" loading={true} onclick={() => alert('Button clicked!')}>Loading Button</Button>
+</div>
+
+<div class="component">
+	<p class="comp-title">Combobox</p>
+
+	<Combobox
+		name="example-combobox"
+		label="Select an option"
+		placeholder="Choose..."
+		items={[
+			{ value: 'option1', label: 'Option 1' },
+			{ value: 'option2', label: 'Option 2' },
+			{ value: 'option3', label: 'Option 3' }
+		]}
+		onchange={(e) => console.log('Selected:', e.value)}
+		onvalidate={(e) => console.log('Validation:', e.detail)}
+	/>
+</div>
+
+<style lang="postcss">
+	@reference '$lib/styles/theme.css';
+
+	.comp-title {
+		@apply mb-2 text-lg font-semibold;
+	}
+</style>