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

More blurriness, and stylish

Browse Source
This commit is contained in:
bivashy
2025-06-27 01:26:05 +05:00
parent ef68e4a84d
commit b7e8a033c3
8 changed files with 153 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
pages/search.vue
View File

@ -9,50 +9,53 @@ const isLoading = ref(false)
const error = ref<unknown>(null)
watchEffect(async () => {
if (!searchQuery.value) return
if (!searchQuery.value) return
try {
isLoading.value = true
error.value = null
const response = await search({ title: searchQuery.value })
results.value = response.data.results || []
} catch (err) {
error.value = err
console.error('Search failed:', err)
} finally {
isLoading.value = false
}
try {
isLoading.value = true
error.value = null
const response = await search({ title: searchQuery.value })
results.value = response.data.results || []
} catch (err) {
error.value = err
console.error('Search failed:', err)
} finally {
isLoading.value = false
}
})
</script>
<template>
<div>
<div v-if="isLoading">
Loading results...
</div>
<div>
<div v-if="isLoading">
Loading results...
</div>
<div v-if="error">
Error loading results: {{ error }}
</div>
<div v-if="error">
Error loading results: {{ error }}
</div>
<div v-if="results.length > 0" class="grid grid-cols-[repeat(auto-fill,32rem)] justify-around gap-8 grid-flow-row">
<div v-for="item in results" :key="item.id" class="flex w-[32rem]">
<NuxtLink :to="`/anime/${item.id}`">
<img v-if="item.material_data?.anime_poster_url" :src="item.material_data.anime_poster_url" :alt="item.title"
class="rounded-md">
<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>
</div>
</NuxtLink>
</div>
</div>
<div v-if="results.length > 0"
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>
<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>
</div>
</NuxtLink>
</div>
</div>
<div v-if="!isLoading && !error && results.length === 0 && searchQuery">
No results found for "{{ searchQuery }}"
<div v-if="!isLoading && !error && results.length === 0 && searchQuery">
No results found for "{{ searchQuery }}"
</div>
</div>
</div>
</template>