133 lines
3.3 KiB
Vue
133 lines
3.3 KiB
Vue
<!-- pages/search.vue -->
|
|
<script setup lang="ts">
|
|
import { search, type Result } from '~/openapi/search'
|
|
|
|
// Define route query params
|
|
const route = useRoute()
|
|
const searchQuery = ref(route.query.title as string || '')
|
|
|
|
// Search results state
|
|
const results = ref<Result[]>([])
|
|
const isLoading = ref(false)
|
|
const error = ref<unknown>(null)
|
|
|
|
// Perform search when query changes
|
|
watchEffect(async () => {
|
|
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
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="search-page">
|
|
<div class="search-box">
|
|
<input v-model="searchQuery" type="text" placeholder="Search anime..."
|
|
@keyup.enter="navigateTo({ path: '/search', query: { title: searchQuery } })">
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="isLoading" class="loading">
|
|
Loading results...
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-if="error" class="error">
|
|
Error loading results: {{ error.message }}
|
|
</div>
|
|
|
|
<!-- Results List -->
|
|
<div v-if="results.length > 0" class="results-grid">
|
|
<div v-for="item in results" :key="item.id" class="result-card">
|
|
<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="poster">
|
|
<div class="details">
|
|
<h3 className="scroll-m-20 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>
|
|
|
|
<!-- No Results -->
|
|
<div v-if="!isLoading && !error && results.length === 0 && searchQuery" class="no-results">
|
|
No results found for "{{ searchQuery }}"
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.search-page {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
.search-box {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
padding: 12px;
|
|
font-size: 16px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.results-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.result-card {
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.result-card:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.poster {
|
|
width: 100%;
|
|
height: 350px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.details {
|
|
padding: 15px;
|
|
}
|
|
|
|
.details p {
|
|
margin: 5px 0;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.loading,
|
|
.no-results,
|
|
.error {
|
|
text-align: center;
|
|
padding: 40px;
|
|
font-size: 18px;
|
|
}
|
|
</style>
|