From abbc2de29889c55cac8544e765e3fa94483bf3de Mon Sep 17 00:00:00 2001
From: Niklas Kapelle <niklas@kapelle.org>
Date: Wed, 7 May 2025 19:14:27 +0200
Subject: [PATCH] added Search component

---
 web/src/lib/Search.svelte | 44 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)
 create mode 100644 web/src/lib/Search.svelte

diff --git a/web/src/lib/Search.svelte b/web/src/lib/Search.svelte
new file mode 100644
index 0000000..3af39bc
--- /dev/null
+++ b/web/src/lib/Search.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+  let {
+    placeholder = "Search",
+    onSearch = () => {},
+    onSuggest = () => {
+      return [];
+    },
+  }: {
+    placeholder?: string;
+    onSearch?: (input: string) => void;
+    onSuggest?: (input: string) => string[];
+  } = $props();
+
+  let inputText = $state("");
+  let showSuggestions = $derived(inputText != "");
+  let suggestions = $state(["One", "Two", "Three"]);
+</script>
+
+<div class="relative w-full">
+  <input
+    type="search"
+    {placeholder}
+    bind:value={inputText}
+    class="bg-slate-500 text-white p-2 rounded-xl w-full"
+    onsubmit={() => {
+      onSearch(inputText);
+    }}
+    oninput={() => {
+      suggestions = onSuggest(inputText);
+    }}
+  />
+
+  {#if showSuggestions}
+    <div
+      class="absolute z-10 bg-white border border-gray-300 rounded-lg w-full shadow-lg"
+    >
+      {#each suggestions as suggestion}
+        <div class="px-4 py-2 hover:bg-gray-100 cursor-pointer">
+          {suggestion}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>