diff options
| -rw-r--r-- | components/Header.vue | 24 | ||||
| -rw-r--r-- | components/Stream.vue | 2 | ||||
| -rw-r--r-- | package-lock.json | 4 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | pages/search/[query].vue | 8 | ||||
| -rw-r--r-- | server/api/search.js | 5 |
6 files changed, 38 insertions, 7 deletions
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 |