feature/search-prototype (#1)

### Description
This pull request migrates to Nuxt 4.0.0, adds docker, and uses Orval and OpenAPI 3.0 specification to interact with backend

Reviewed-on: #1
Co-authored-by: bivashy <botyrbojey@gmail.com>
Co-committed-by: bivashy <botyrbojey@gmail.com>
This commit is contained in:
2025-07-19 18:05:51 +00:00
committed by bivashy
parent 0bf60ad783
commit 57b071d47f
71 changed files with 2977 additions and 737 deletions

52
app/pages/search.vue Normal file
View File

@ -0,0 +1,52 @@
<script setup lang="ts">
import { AnimeCard } from '~/components/ui/anime-card'
import { search, type Result } from '~/openapi/search'
const route = useRoute()
const searchQuery = ref(route.query.title as string || '')
const results = ref<Result[]>([])
const isLoading = ref(false)
const error = ref<unknown>(null)
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
}
}, {
flush: 'post'
})
</script>
<template>
<div>
<div v-if="isLoading">
Loading results...
</div>
<div v-if="error">
Error loading results: {{ error }}
</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]">
<AnimeCard :item="item" />
</div>
</div>
<div v-if="!isLoading && !error && results.length === 0 && searchQuery">
No results found for "{{ searchQuery }}"
</div>
</div>
</template>