Add to HomeView main comp and SearchBar to Main component

spa/src/components/Main.vue

@@ -1,10 +1,14 @@
 <template>
     <div class="content-wrapper" :class="{ centered: isCentered }">
-      <slot></slot>
+      <slot>
+        <SearchBar />
+      </slot>
     </div>
   </template>
   
   <script>
+  import SearchBar from './SearchBar.vue';
+
   export default {
     name: 'ContentWrapper',
     props: {
@@ -13,17 +17,21 @@
         type: Boolean,
         default: true
       }
+    },
+    components: {
+        SearchBar
     }
   };
   </script>
 
+  
   <style scoped>
   .content-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: flex-start; /* Выравниваем контент к верху */
     align-items: stretch;
-    min-height: 100vh; /* Если нужно растянуть контейнер на всю высоту экрана */
+    min-height: 80vh; /* Если нужно растянуть контейнер на всю высоту экрана */
   }
   
   .centered {

spa/src/components/SearchBar.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="search-bar">
+      <input
+        type="text"
+        placeholder="Поиск..."
+        v-model="searchQuery"
+        @keyup.enter="onSubmit"
+      />
+      <button @click="onSubmit">Найти</button>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: 'SearchBar',
+    data() {
+      return {
+        searchQuery: ''
+      };
+    },
+    methods: {
+      onSubmit() {
+        this.$emit('submit', this.searchQuery);
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .search-bar {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+  
+  .search-bar input {
+    flex-grow: 1;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+  
+  .search-bar button {
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+  </style>

spa/src/views/HomeView.vue

@@ -1,6 +1,7 @@
 <script setup>
 import Header from '../components/Header.vue'
 import Footer from '../components/Footer.vue'
+import Main from '../components/Main.vue'
 </script>
 
 <template>