From 2d3d92f3c84ff006bfd058e3c56198839ed6aed9 Mon Sep 17 00:00:00 2001
From: PandaDEV <70103896+0PandaDEV@users.noreply.github.com>
Date: Sat, 15 Mar 2025 00:03:16 +0100
Subject: [PATCH] feat: add TopBar component with search functionality

---
 components/TopBar.vue | 55 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 components/TopBar.vue

diff --git a/components/TopBar.vue b/components/TopBar.vue
new file mode 100644
index 0000000..e745674
--- /dev/null
+++ b/components/TopBar.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="topbar">
+    <input
+      ref="searchInput"
+      v-model="searchQuery"
+      @input="onSearch"
+      class="search"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      type="text"
+      placeholder="Type to filter entries..." />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const searchQuery = ref('')
+const searchInput = ref<HTMLInputElement | null>(null)
+
+const emit = defineEmits<{
+  (e: 'search', query: string): void
+  (e: 'focus'): void
+}>()
+
+const onSearch = () => {
+  emit('search', searchQuery.value)
+}
+
+defineExpose({ searchInput })
+</script>
+
+<style lang="scss">
+.topbar {
+  width: 100%;
+  height: 56px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  padding-inline: 16px;
+  z-index: 100;
+
+  .search {
+    width: 100%;
+    height: 100%;
+    font-size: 18px;
+    color: var(--text);
+    background-color: transparent;
+    outline: none;
+    border: none;
+    font-family: SFRoundedMedium;
+  }
+}
+</style>