initial commit

1 files changed, 38 insertions, 0 deletions

diff --git a/src/lib/components/Searchbar.svelte b/src/lib/components/Searchbar.svelte
new file mode 100644
index 0000000..3aeab92
--- /dev/null
+++ b/src/lib/components/Searchbar.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { tabs } from '$lib/state';
+  import { next, scrollTabIntoView } from '$lib/utils';
+  import type { Tab } from '$lib/types';
+
+  let query = '';
+
+  function search() {
+    let a = query;
+    query = '';
+    if (a) {
+      let newTabs = $tabs;
+      const newTab: Tab = {
+        id: next(),
+        type: 'find',
+        data: a.toLowerCase().replaceAll(' ', '-')
+      };
+      newTabs.push(newTab);
+      tabs.set(newTabs);
+      scrollTabIntoView(String(newTab.id), true);
+    }
+  }
+</script>
+
+<form on:submit|preventDefault={search} class="mt- flex rounded-md shadow-sm">
+  <div class="relative flex items-stretch flex-grow focus-within:z-10">
+    <input
+      bind:value={query}
+      class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-none rounded-l-md sm:text-sm border-gray-300"
+      placeholder="article name"
+    />
+  </div>
+  <button
+    type="submit"
+    class="-ml-px relative inline-flex items-center space-x-2 px-3 py-2 border border-gray-300 text-sm font-medium rounded-r-md text-gray-700 bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 text-white"
+    >Go</button
+  >
+</form>