implement search

src/components/SearchBar.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue'
+import { notes, findNotes } from '@/composables/useNotes'
+
+const active = ref(false)
+watch(active, () => {
+  if (!active.value) query.value = ''
+})
+
+const query = ref('')
+const results = computed<Note[]>(() => {
+  return query.value ? findNotes(query.value) : notes.value
+})
+
+const click = (note: Note) => {
+  console.log(note.title)
+}
+</script>
+<template>
+  <div id="search-container" class="relative h-full flex-1">
+    <input
+      type="text"
+      placeholder="Search for notes"
+      class="h-full w-full rounded border-0 bg-[#355fd3] px-2 text-white outline-none placeholder:text-white focus:bg-white focus:text-black"
+      @focus="active = true"
+      @mousedown="active = true"
+      @blur="active = false"
+      v-model="query"
+    />
+    <div
+      class="z-1000 dropdown absolute left-0 right-0 top-[100%]"
+      v-if="active && results.length > 0"
+    >
+      <ul
+        tabindex="0"
+        class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow"
+      >
+        <li v-for="note in results">
+          <a
+            class="px-2 py-1"
+            @click.stop.prevent="() => click(note)"
+            @mousedown.prevent
+            >{{ note.title }}</a
+          >
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>