From 3a918879ec66708f3bd1ed043e3f82802fcf7d9a Mon Sep 17 00:00:00 2001
From: Sergey Krylov <ksv741@mail.ru>
Date: Wed, 22 Jan 2025 07:07:39 +0300
Subject: [PATCH] add filter input and sorting select

---
 src/App.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index d37664c..79fd162 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,9 +11,25 @@
     <Header/>
 
     <div class="p-10">
-      <h2 class="text-3xl font-bold mb-8">Все кроссовки</h2>
+      <div class="flex justify-between items-center mb-8">
+        <h2 class="text-3xl font-bold">Все кроссовки</h2>
+
+        <div class="flex gap-4 flex-wrap">
+          <select class="py-2 px-3 border rounded-md outline-none">
+            <option>По названию</option>
+            <option>По цене (сначала дешевые)</option>
+            <option>По цене (сначала дорогие)</option>
+          </select>
+
+          <div class="relative">
+            <img class="absolute top-3 left-4" src="/search.svg" alt="Search">
+            <input class="border rounded-md py-2 pl-11 pr-4 outline-none focus:border-gray-400" type="text" placeholder="Поиск">
+          </div>
+        </div>
+      </div>
 
       <CardList/>
+
     </div>
   </div>
 </template>