Rewrite search engine interface

client/src/App.vue

@@ -1,15 +1,30 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-
-
 </script>
 
 <template>
-
-
-  <RouterView />
+  <header class="bg-white shadow-sm p-4">
+    <div class="flex justify-between items-center">
+      <ul class="flex justify-center space-x-4">
+        <li>
+          <router-link to="/" class="text-gray-600 hover:text-gray-800">Home</router-link>
+        </li>
+      </ul>
+      <ul class="flex justify-center space-x-4">
+        <li>
+          <button class="py-2 px-4 rounded-lg transition duration-300">
+            Bionic Reading
+          </button>
+        </li>
+        <li>
+          <button class="py-2 px-4 rounded-lg transition duration-300">
+            Speed Reading
+          </button>
+        </li>
+      </ul>
+    </div>
+  </header>
+  <main class="min-h-screen bg-gray-50 flex items-center justify-center">
+    <RouterView />
+  </main>
 </template>
-
-<style scoped>
-
-</style>

client/src/router/index.ts

@@ -1,13 +1,13 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Search from '../views/Search.vue'
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+  history: createWebHashHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: HomeView
+      name: 'search',
+      component: Search
     }
   ]
 })

client/src/stores/search.ts

@@ -6,18 +6,21 @@ export interface SearchResult {
   title: string
   url: string
   description: string
+  summary: string
 }
 
 const dummyResults: SearchResult[] = [
   {
     title: 'Dummy result',
     url: 'https://example.com',
-    description: 'This is a dummy result'
+    description: 'This is a dummy result',
+    summary: 'This is a dummy summary'
   },
   {
     title: 'Another dummy result',
-    url: 'https://example.com',
-    description: 'This is another dummy result'
+    url: 'https://uni-tuebingen.de/en',
+    description: 'This is another dummy result',
+    summary: 'This is another dummy summary'
   }
 ]
 

client/src/views/Search.vue

@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <div class="bg-white p-8 rounded-lg shadow-lg w-full max-w-6xl">
+      <div class="flex items-center border-b border-pastel-green py-2 mb-6">
+        <input
+          class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none focus:ring-0 placeholder-gray-400"
+          type="text"
+          placeholder="Search..."
+          aria-label="Search"
+          v-model="query"
+          @keyup.enter="search"
+        />
+        <button
+          class="flex-shrink-0 bg-red-200 hover:bg-red-400 text-sm border-none text-white py-2 px-4 rounded-2xl transition duration-300"
+          type="button"
+          @click="search"
+        >
+          Search
+        </button>
+      </div>
+      <div v-if="loading" class="text-center text-gray-600">
+        Loading...
+      </div>
+      <div v-else>
+        <ul>
+          <li v-for="result in results" :key="result.id"
+              class="mb-4 p-4 border rounded-lg shadow-sm bg-white hover:shadow-md transition-shadow duration-300">
+            <a :href="result.url" class="text-blue-400 hover:text-blue-500 font-medium text-lg">{{ result.title }}</a>
+            <p class="text-gray-600 mt-2">{{ result.description }}</p>
+            <p>
+              {{ result.summary }}
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
+import { useSearchStore } from '@/stores/search'
+
+const searchStore = useSearchStore()
+const { results } = storeToRefs(searchStore)
+
+const loading = false
+
+const query = ref('')
+const suggestionResults = ref<string[]>([
+  'Apple',
+  'Banana',
+  'Cherry'
+])
+const search = () => {
+  searchStore.search(query.value)
+}
+</script>