1 files changed, 48 insertions, 0 deletions
diff --git a/apps/projects/src/app/pages/ui-workbench.svelte b/apps/projects/src/app/pages/ui-workbench.svelte
new file mode 100644
index 0000000..5e92c9d
--- /dev/null
+++ b/apps/projects/src/app/pages/ui-workbench.svelte
@@ -0,0 +1,48 @@
+<script>
+	import Dropdown from "$shared/components/dropdown.svelte";
+	import {generate_random_hex_color} from "$shared/lib/colors";
+	import {uuid_v4} from "$shared/lib/helpers";
+
+	let entries = [];
+
+	let dropdown;
+
+	for (let i = 1; i < 20; i++) {
+		entries.push({
+			id: uuid_v4(),
+			name: "Option " + i,
+			selected: false,
+			color: generate_random_hex_color(true)
+		});
+	}
+
+	function on_create({detail}) {
+		const copy = entries;
+		const entry = {id: uuid_v4(), name: detail.name};
+		copy.push(entry);
+		entries = copy;
+		console.log("Created", entry);
+		dropdown.select_entry(entry.id);
+	}
+
+	function on_select({detail}) {
+		console.log(detail);
+	}
+</script>
+
+<main class="grid gap-y-lg padding-md">
+    <div class="row">
+        <label for="dropdown">Choose an entry</label>
+        <Dropdown id="dropdown"
+                  name="dropdown"
+                  placeholder="Search or create"
+                  maxlength="50"
+                  creatable="true"
+                  multiple="false"
+                  {entries}
+                  bind:this={dropdown}
+                  on:create={on_create}
+                  on:select={on_select}
+        />
+    </div>
+</main>