collection toolbar

src/views/CollectionView.vue

@@ -1,9 +1,10 @@
-<script setup lang="ts">
+<script setup>
 
+import CollectionToolbar from '@/views/CollectionView/CollectionToolbar.vue'
 </script>
 
 <template>
-Collection View
+ <CollectionToolbar />
 </template>
 
 <style scoped>

src/views/CollectionView/CollectionToolbar.vue

@@ -0,0 +1,72 @@
+<script setup>
+import { ref } from 'vue'
+
+const value = ref(null)
+const options = [
+  { label: 'Placeholder 1', value: 'Placeholder 1' },
+  { label: 'Placeholder 2', value: 'Placeholder 2' },
+]
+</script>
+
+<template>
+  <div class="toolbar">
+    <n-button type="primary" class="toolbar-item"> Add merch </n-button>
+
+    <div class="search-wrapper toolbar-item">
+      <n-input placeholder="Search..." clearable />
+    </div>
+
+    <div class="selector toolbar-item">
+      <n-select
+        placeholder="Select label"
+        clearable
+        multiple
+        v-model:value="value"
+        :options="options"
+        class="mobile-full-width" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e0e0e0;
+  border-radius: 8px;
+  flex-wrap: wrap;
+}
+
+.toolbar-item {
+  flex-shrink: 0;
+}
+
+.search-wrapper {
+  flex-grow: 1;
+  min-width: 200px;
+}
+
+.selector {
+  min-width: 220px;
+}
+
+@media (max-width: 768px) {
+  .selector {
+    flex-basis: 100%;
+    margin-left: auto;
+  }
+}
+
+@media (max-width: 768px) {
+  .search-wrapper {
+    flex-basis: 100%;
+  }
+}
+
+:deep(.mobile-full-width) {
+  width: 100%;
+}
+</style>