implement search

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>