feat: navbar component

client/components/Navbar.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps({
+  search: {
+    type: String,
+    default: undefined,
+  },
+  noPadding: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const emit = defineEmits<{
+  (event: 'update:search', value: string): void
+}>()
+
+function update(event: any) {
+  emit('update:search', event.target.value)
+}
+</script>
+
+<template>
+  <div flex="~ col gap2" border="b base" flex-1 navbar-glass pb4 :class="[{ p4: !noPadding }]">
+    <div flex="~ gap4">
+      <slot name="search">
+        <NTextInput
+          placeholder="Search..."
+          icon="carbon-search"
+          n="primary" flex-auto
+          :class="{ 'px-5 py-2': !noPadding }"
+          :value="search"
+          @input="update"
+        />
+      </slot>
+      <slot name="actions" />
+    </div>
+    <slot />
+  </div>
+</template>