From a74a925e23addd5cc40476bda5827ec382a2618b Mon Sep 17 00:00:00 2001
From: Kenimarru <chehami.kamal@mail.com>
Date: Tue, 9 Jan 2024 18:45:34 +0100
Subject: v0.5.0

---
 components/Header.vue    | 24 +++++++++++++++++++++---
 components/Stream.vue    |  2 +-
 package-lock.json        |  4 ++--
 package.json             |  2 +-
 pages/search/[query].vue |  8 ++++++++
 server/api/search.js     |  5 +++++
 6 files changed, 38 insertions(+), 7 deletions(-)
 create mode 100644 pages/search/[query].vue
 create mode 100644 server/api/search.js

diff --git a/components/Header.vue b/components/Header.vue
index 7789caf..b1699d1 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -3,8 +3,26 @@
         <NuxtLink to="/">
             <h1 class="text-secondary text-4xl font-bold">hiruki</h1>
         </NuxtLink>
-        <NuxtLink class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75">
+        <button type="button" @click="toggle = !toggle"
+            class="text-primary bg-secondary text-xl rounded-sm pb-1 px-1.5 hover:bg-opacity-75">
             <Icon name="heroicons-solid:magnifying-glass" />
-        </NuxtLink>
+        </button>
+        <div v-show="toggle" class="absolute flex items-center right-4 top-16 gap-2">
+            <input type="text" placeholder="Search" @keypress.enter="getSearch" v-model.trim="query" 
+            class="text-primary bg-sub border-primary border rounded-sm outline-none 
+                py-1 px-2 focus:border-secondary" />
+        </div>
     </section>
-</template>
\ No newline at end of file
+</template>
+
+<script setup>
+const router = useRouter();
+const toggle = ref(false);
+const query = ref("");
+
+const getSearch = () => {
+    if (query.value !== "") {
+        router.push(`/search/${query.value}`);
+    }
+};
+</script>
\ No newline at end of file
diff --git a/components/Stream.vue b/components/Stream.vue
index 75aae66..b59563f 100644
--- a/components/Stream.vue
+++ b/components/Stream.vue
@@ -91,7 +91,7 @@ const router = useRouter();
 const getEpisode = (event) => {
     const value = event.target.value
     if (value) {
-        router.push(`/e/${id}/${value}`)
+        router.push(`/e/${id}/${value}`);
     }
 }
 </script>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f1c8685..12a8540 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "hiruki",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "hiruki",
-            "version": "0.4.0",
+            "version": "0.5.0",
             "hasInstallScript": true,
             "license": "MIT",
             "devDependencies": {
diff --git a/package.json b/package.json
index 4a0c070..af59eb4 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "hiruki",
-    "version": "0.4.0",
+    "version": "0.5.0",
     "private": true,
     "type": "module",
     "scripts": {
diff --git a/pages/search/[query].vue b/pages/search/[query].vue
new file mode 100644
index 0000000..42d6fcd
--- /dev/null
+++ b/pages/search/[query].vue
@@ -0,0 +1,8 @@
+<template>
+    <Cards title="Search Result" :description="`Query: ${query}`" :data="data" />
+</template>
+
+<script setup>
+const { query } = useRoute().params
+const { data } = await useFetch("/api/search?query=" + query);
+</script>
\ No newline at end of file
diff --git a/server/api/search.js b/server/api/search.js
new file mode 100644
index 0000000..370f609
--- /dev/null
+++ b/server/api/search.js
@@ -0,0 +1,5 @@
+export default defineEventHandler(async (event) => {
+    const { query } = getQuery(event);
+    const { API } = useRuntimeConfig();
+    return await $fetch(API + "/search/" + query);
+});
\ No newline at end of file
-- 
cgit v1.2.3