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>

src/components/SideBar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { rootNote } from '../composables/useNotes'
-import SideBarMenu from './SideBar/SideBarMenu.vue'
-import SideBarMenuItem from './SideBar/SideBarMenuItem.vue'
+import { rootNote } from '@/composables/useNotes'
+import SideBarMenu from '@/components/SideBar/SideBarMenu.vue'
+import SideBarMenuItem from '@/components/SideBar/SideBarMenuItem.vue'
 
 const props = defineProps<{
   viewModes: ViewMode[]

src/components/TopBar.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import Hamburger from './Hamburger.vue'
+import Hamburger from '@/components/Hamburger.vue'
+import SearchBar from '@/components/SearchBar.vue'
 import Logo from './Logo.vue'
 const props = defineProps<{
   sideBarCollapsed: boolean
@@ -24,20 +25,13 @@ const emit = defineEmits<{
         />
         <Logo class="ml-auto px-3 text-2xl" />
       </div>
-      <div class="mr-3 flex h-full flex-1 items-center gap-3 py-2.5">
-        <input
-          type="text"
-          placeholder="Search for notes"
-          class="h-full flex-1 rounded border-0 bg-[#355fd3] px-2 text-white outline-none placeholder:text-white focus:bg-white focus:text-black"
-        />
-        <button>+</button>
-        <button>Sign in</button>
+      <div class="mr-3 flex h-full flex-1 items-center gap-2 py-2.5">
+        <SearchBar />
+        <button class="btn-outline btn-sm btn h-full text-white">+</button>
+        <button class="btn-outline btn-sm btn h-full text-white">
+          Sign in
+        </button>
       </div>
     </div>
   </div>
 </template>
-<style lang="postcss">
-button {
-  @apply h-full flex items-center rounded-md border-[1px] border-solid  border-white bg-primary px-3 py-1 text-sm font-medium text-white hover:bg-white hover:text-black;
-}
-</style>