search as separate component

src/App.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { state, fetchPapers, getTopics } from '@/stores'
+import { fetchPapers, getTopics } from '@/stores'
 import MainMenu from '@/components/MainMenu.vue'
-import SearchBar from '@/components/SearchBar.vue'
 /* import FooterMenu from '@/components/FooterMenu.vue' */
 import { onMounted } from 'vue'
 
@@ -25,9 +24,8 @@ onMounted (async () => {
       </h1>
       <MainMenu />
     </div>
-    <SearchBar />
   </header>
-
+  
   <main class="max-w-5xl m-auto">
     <RouterView>
     </RouterView>

src/components/SearchBar.vue

@@ -1,42 +1,7 @@
 <script setup lang="ts">
-import { updateSearch } from '@/stores';
+import TheSearch from '@/components/TheSearch.vue';
-import { onUpdated, ref } from 'vue';
-
-let searchValue = ref('')
-let searchType = ref('')
-
-function submit(type: string) { searchType = ref(type) }
-onUpdated(() => updateSearch(searchValue, searchType))
 </script>
 
 <template>
-  <form class="sticky top-0 flex flex-row place-content-center">
+  <TheSearch />
-    <label class="hidden" for="searchBar">Suche</label>
-    <div class="flex flex-row w-full max-w-5xl">
-      <input
-        id="searchBar"
-        class="p-6 grow bg-transparent placeholder:text-text-300 dark:placeholder:text-text-700 text-2xl text-center focus-visible:outline focus-visible:outline-current"
-        type="search"
-        placeholder="z. B. Thema, Name, VII-EF-08640, …"
-        v-model="searchValue"
-        @keyup.alt.enter.exact="submit('assist')"
-        @keyup.enter.exact="submit('filter')"
-        />
-        <div class="flex flex-row p-4 place-content-center">
-          <button
-          class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white"
-          @click.prevent="submit('filter')"
-          aria-keyshortcuts="Enter"
-          >Suchen
-        </button>
-        <button
-          class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 rounded-r-lg text-white"
-          @click.prevent="submit('assist')"
-          aria-keyshortcuts="Alt+Enter"
-          title="Tastenkürzel: Alt + Enter"
-          >Fragen
-        </button>
-      </div>
-    </div>
-  </form>
 </template>

src/components/TheSearch.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { updateSearch } from '@/stores';
+import { onUpdated, ref } from 'vue';
+
+let searchValue = ref('');
+let searchType = ref('');
+
+function submit(type: string) { searchType = ref(type) };
+onUpdated(() => updateSearch(searchValue, searchType));
+</script>
+
+<template>
+  <form class="sticky top-2 flex flex-row place-content-center m-2">
+    <label class="hidden" for="searchBar">Suche</label>
+    <div class="flex flex-row w-full max-w-5xl gap-2">
+      <input
+        id="searchBar"
+        class="p-2 grow placeholder:text-text-300 dark:placeholder:text-text-700 text-xl text-center focus-visible:outline focus-visible:outline-current rounded-xl bg-background-100 dark:bg-background-900"
+        type="search"
+        placeholder="Suchen, z. B. Thema, Name, VII-EF-08640, …"
+        v-model="searchValue"
+        @keyup.alt.enter.exact="submit('assist')"
+        @keyup.enter.exact="submit('filter')"
+      />
+      <div class="flex flex-row place-content-center">
+        <button
+          class="py-2 px-4 bg-primary-button-500 hover:bg-primary-button-600 rounded-l-lg text-white"
+          @click.prevent="submit('filter')"
+          aria-keyshortcuts="Enter"
+          >Suchen
+        </button>
+        <button
+          class="py-2 px-4 bg-secondary-button-500 hover:bg-secondary-button-600 rounded-r-lg text-white"
+          @click.prevent="submit('assist')"
+          aria-keyshortcuts="Alt+Enter"
+          title="Tastenkürzel: Alt + Enter"
+          >Fragen
+        </button>
+      </div>
+    </div>
+  </form>
+</template>

src/views/TheLanding.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+  import TheSearch from '@/components/TheSearch.vue'
 </script>
 
 <template>
-  Landing Page
+  <TheSearch />
 </template>

src/views/TheTopics.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 import FilterSidebar from '@/components/papers/FilterSidebar.vue'
 import TopicList from '@/components/papers/TopicList.vue'
+import SearchBar from '@/components/SearchBar.vue'
 </script>
 
 <template>
+  <SearchBar />
   <div
     class="flex flex-row"
     >