From faaef828cf69d07d61d300164aad6bab42ac363d Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Tue, 16 Sep 2025 19:59:42 +0300
Subject: [PATCH] collection toolbar

---
 src/views/CollectionView.vue                  |  5 +-
 .../CollectionView/CollectionToolbar.vue      | 72 +++++++++++++++++++
 2 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 src/views/CollectionView/CollectionToolbar.vue

diff --git a/src/views/CollectionView.vue b/src/views/CollectionView.vue
index 704afae..02abad9 100644
--- a/src/views/CollectionView.vue
+++ b/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>
diff --git a/src/views/CollectionView/CollectionToolbar.vue b/src/views/CollectionView/CollectionToolbar.vue
new file mode 100644
index 0000000..c854249
--- /dev/null
+++ b/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>