From 2a3994701c7f4f6244df991b57870eb4518f7d02 Mon Sep 17 00:00:00 2001
From: valitovgaziz <a-c-v-a-l@mail.ru>
Date: Sat, 23 Nov 2024 01:52:32 +0500
Subject: [PATCH] Add to HomeView main comp and SearchBar to Main component

---
 spa/src/components/Main.vue      | 12 ++++++--
 spa/src/components/SearchBar.vue | 52 ++++++++++++++++++++++++++++++++
 spa/src/views/HomeView.vue       |  1 +
 3 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 spa/src/components/SearchBar.vue

diff --git a/spa/src/components/Main.vue b/spa/src/components/Main.vue
index 6f46da7..60aa44a 100644
--- a/spa/src/components/Main.vue
+++ b/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,9 +17,13 @@
         type: Boolean,
         default: true
       }
+    },
+    components: {
+        SearchBar
     }
   };
   </script>
+
   
   <style scoped>
   .content-wrapper {
@@ -23,7 +31,7 @@
     flex-direction: column;
     justify-content: flex-start; /* Выравниваем контент к верху */
     align-items: stretch;
-    min-height: 100vh; /* Если нужно растянуть контейнер на всю высоту экрана */
+    min-height: 80vh; /* Если нужно растянуть контейнер на всю высоту экрана */
   }
   
   .centered {
diff --git a/spa/src/components/SearchBar.vue b/spa/src/components/SearchBar.vue
new file mode 100644
index 0000000..931452d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/spa/src/views/HomeView.vue b/spa/src/views/HomeView.vue
index 67d325e..0717398 100644
--- a/spa/src/views/HomeView.vue
+++ b/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>