More blurriness, and stylish
This commit is contained in:
123
pages/index.vue
123
pages/index.vue
@ -3,85 +3,78 @@
|
||||
import kodikImage from "assets/img/kodik.png";
|
||||
import shikimoriImage from "assets/img/shikimori.png";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "~/components/ui/select";
|
||||
import { toast } from "vue-sonner";
|
||||
import { Toaster } from "~/components/ui/sonner";
|
||||
import { Navbar } from "~/components/ui/navbar";
|
||||
import 'vue-sonner/style.css'
|
||||
import { Icon } from "#components";
|
||||
|
||||
const router = useRouter()
|
||||
const searchProvider = ref('kodik')
|
||||
const displaySearchProvider = computed(() => {
|
||||
let label = '';
|
||||
let image;
|
||||
if (searchProvider.value === 'kodik') {
|
||||
label = 'Kodik';
|
||||
image = kodikImage;
|
||||
}
|
||||
if (searchProvider.value === 'shikimori') {
|
||||
label = 'Shikimori';
|
||||
image = shikimoriImage;
|
||||
}
|
||||
return {
|
||||
label,
|
||||
image
|
||||
}
|
||||
let label = '';
|
||||
let image;
|
||||
if (searchProvider.value === 'kodik') {
|
||||
label = 'Kodik';
|
||||
image = kodikImage;
|
||||
}
|
||||
if (searchProvider.value === 'shikimori') {
|
||||
label = 'Shikimori';
|
||||
image = shikimoriImage;
|
||||
}
|
||||
return {
|
||||
label,
|
||||
image
|
||||
}
|
||||
})
|
||||
const search = defineModel<string>("")
|
||||
function querySearch() {
|
||||
if (!search.value || search.value.trim() === "") {
|
||||
toast('Please enter a value');
|
||||
return;
|
||||
}
|
||||
router.push({ path: '/search', query: { title: search.value, provider: searchProvider.value } })
|
||||
.catch(err => {
|
||||
console.error('Navigation error:', err);
|
||||
toast.error('Failed to navigate to search results');
|
||||
});
|
||||
if (!search.value || search.value.trim() === "") {
|
||||
toast('Please enter a value');
|
||||
return;
|
||||
}
|
||||
router.push({ path: '/search', query: { title: search.value, provider: searchProvider.value } })
|
||||
.catch(err => {
|
||||
console.error('Navigation error:', err);
|
||||
toast.error('Failed to navigate to search results');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Toaster />
|
||||
<Navbar />
|
||||
|
||||
<div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
|
||||
<form @submit.prevent="querySearch" class="flex items-center gap-2">
|
||||
<Select v-model="searchProvider">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an provider">
|
||||
<img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
<span>{{ displaySearchProvider.label }}</span>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Providers</SelectLabel>
|
||||
<SelectItem value="kodik">
|
||||
<img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
<span>Kodik</span>
|
||||
</SelectItem>
|
||||
<SelectItem value="shikimori">
|
||||
<img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
Shikimori
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
|
||||
<Button type="submit">
|
||||
<Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
|
||||
</Button>
|
||||
</form>
|
||||
<div class="bg-background flex-1 w-screen flex justify-center items-center gap-1">
|
||||
<form @submit.prevent="querySearch" class="flex items-center gap-2">
|
||||
<Select v-model="searchProvider">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an provider">
|
||||
<img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
<span>{{ displaySearchProvider.label }}</span>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Providers</SelectLabel>
|
||||
<SelectItem value="kodik">
|
||||
<img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
<span>Kodik</span>
|
||||
</SelectItem>
|
||||
<SelectItem value="shikimori">
|
||||
<img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
Shikimori
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
|
||||
<Button type="submit">
|
||||
<Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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>
|
||||
|
||||
Reference in New Issue
Block a user