Squashed commit message

frontend/spa/src/components/SearchInput.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="search-wrapper w-full">
+    <label class="input w-full">
+      <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <g
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            stroke-width="2.5"
+            fill="none"
+            stroke="currentColor"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.3-4.3"></path>
+        </g>
+      </svg>
+      <input
+          readonly
+          class="grow input-lg w-full"
+          placeholder="Поиск по магазину"
+          @click="showSearchPage"
+      />
+    </label>
+  </div>
+</template>
+
+<script setup>
+import {useRouter} from "vue-router";
+import {useSearchStore} from "@/stores/SearchStore.js";
+import {useHapticFeedback} from "@/composables/useHapticFeedback.js";
+
+const router = useRouter();
+const haptic = useHapticFeedback();
+
+function showSearchPage() {
+  router.push({name: 'search'});
+  useSearchStore().reset();
+  haptic.impactOccurred('medium');
+}
+</script>
+
+