From fab03fac0c1f5bd5c99dd7d0053544ca2ec10022 Mon Sep 17 00:00:00 2001
From: vrifox <vrifox@vrifox.cc>
Date: Thu, 6 Jul 2023 18:46:38 +0200
Subject: [PATCH] search as separate  component

---
 src/App.vue                  |  6 ++----
 src/components/SearchBar.vue | 39 ++-------------------------------
 src/components/TheSearch.vue | 42 ++++++++++++++++++++++++++++++++++++
 src/views/TheLanding.vue     |  3 ++-
 src/views/TheTopics.vue      |  2 ++
 5 files changed, 50 insertions(+), 42 deletions(-)
 create mode 100644 src/components/TheSearch.vue

diff --git a/src/App.vue b/src/App.vue
index 5aa1561..d5fde62 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue
index 0396878..8328eff 100644
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,42 +1,7 @@
 <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))
+import TheSearch from '@/components/TheSearch.vue';
 </script>
 
 <template>
-  <form class="sticky top-0 flex flex-row place-content-center">
-    <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>
+  <TheSearch />
 </template>
\ No newline at end of file
diff --git a/src/components/TheSearch.vue b/src/components/TheSearch.vue
new file mode 100644
index 0000000..4f50965
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/TheLanding.vue b/src/views/TheLanding.vue
index f76a7d5..3bf0244 100644
--- a/src/views/TheLanding.vue
+++ b/src/views/TheLanding.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
+  import TheSearch from '@/components/TheSearch.vue'
 </script>
 
 <template>
-  Landing Page
+  <TheSearch />
 </template>
\ No newline at end of file
diff --git a/src/views/TheTopics.vue b/src/views/TheTopics.vue
index 0613a95..f322edf 100644
--- a/src/views/TheTopics.vue
+++ b/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"
     >