anyame/anyame-frontend-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/search-prototype #1

Merged
bivashy merged 10 commits from feature/search-prototype into main 2025-07-19 18:05:52 +00:00
Conversation 0 Commits 10 Files Changed 71 +2102 -226
35 changed files with 2102 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 4c031e3798 - Show all commits

23
pages/search.vue
View File

@ -1,4 +1,5 @@
<script setup lang="ts">
import { Icon } from '#components'
import { search, type Result } from '~/openapi/search'
const route = useRoute()
@ -14,6 +15,7 @@ watchEffect(async () => {
try {
isLoading.value = true
error.value = null
console.log("SEARCHING")
const response = await search({ title: searchQuery.value })
results.value = response.data.results || []
} catch (err) {
@ -22,6 +24,8 @@ watchEffect(async () => {
} finally {
isLoading.value = false
}
}, {
flush: 'post'
})
</script>
@ -39,16 +43,19 @@ watchEffect(async () => {
class="grid grid-cols-[repeat(auto-fill,16rem)] justify-around gap-8 grid-flow-row">
<div v-for="item in results" :key="item.id" class="flex w-[16rem]">
<NuxtLink :to="`/anime/${item.id}`" class="w-full">
<div v-if="item.material_data?.anime_poster_url" :style="{ 'background-image': 'url('+item.material_data.anime_poster_url+')' }"
:alt="item.title" class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96">
<Button class="backdrop-blur-none bg-primary/80">2 episodes</Button>
<div v-if="item.material_data?.anime_poster_url"
:style="{ 'background-image': 'url(' + item.material_data.anime_poster_url + ')' }"
:alt="item.title"
class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96">
<div
class="flex items-center px-2 py-0.5 backdrop-blur-none bg-primary/75 text-background/80 rounded-sm text-xs">
<Icon name="gg:play-list" />
{{ item.material_data?.episodes_total }}
episode
</div>
</div>
<div>
<h3 className="text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
<p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
<p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
<p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
</p>
<h3 className="text-xl font-semibold tracking-tight">{{ item.title }}</h3>
</div>
</NuxtLink>
</div>