62 lines
2.7 KiB
Vue
62 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import HeroSection from '@/components/ui/internal/HeroSection.vue';
|
|
import { refDebounced } from '@vueuse/core';
|
|
import { Search, SlidersHorizontal } from 'lucide-vue-next';
|
|
import MediaImageCard from '~/components/ui/internal/MediaImageCard.vue';
|
|
import SkeletonMediaImageCard from '~/components/ui/internal/SkeletonMediaImageCard.vue';
|
|
import { getListKodik } from '~/openapi/generated';
|
|
|
|
const tooltipCollisionBoundary = ref<Element | undefined>(undefined);
|
|
|
|
const searchTitle = ref('')
|
|
const debouncedSearchTitle = refDebounced(searchTitle, 1000);
|
|
|
|
const { data: trendingAnimeData, status, error } = await getListKodik({
|
|
composable: 'useFetch',
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-16">
|
|
<HeroSection />
|
|
<div class="flex flex-col items-center m-8 gap-8">
|
|
<div class="flex gap-4 max-w-1/4 md:min-w-3xl sm:min-w-64">
|
|
<InputGroup>
|
|
<InputGroupInput placeholder="Search" v-model="searchTitle" />
|
|
<InputGroupAddon>
|
|
<Search />
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
<Button>
|
|
<SlidersHorizontal />
|
|
</Button>
|
|
</div>
|
|
<div class="w-full flex flex-col items-center gap-4 max-w-full xl:max-w-3/4">
|
|
<div class="flex w-full justify-between">
|
|
<Button variant="ghost" class="text-2xl font-bold tracking-tight">
|
|
TRENDING NOW
|
|
</Button>
|
|
<Button variant="ghost" class="text-muted-foreground text-xl font-semibold tracking-tight">
|
|
View all
|
|
</Button>
|
|
</div>
|
|
<div ref="tooltipCollisionBoundary"
|
|
class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 2xl:grid-cols-6 gap-4 gap-y-12 justify-items-center w-full">
|
|
<template v-if="status === 'pending'">
|
|
<SkeletonMediaImageCard v-for="index in 10" :key="index" />
|
|
</template>
|
|
<template v-else-if="error">
|
|
{{ error }}
|
|
</template>
|
|
<template v-else-if="status === 'success'">
|
|
<MediaImageCard v-for="anime in trendingAnimeData?.result || []" :key="anime.title"
|
|
:id="anime.id!" :image_url="anime?.posterURLs?.[0] || 'TODO'" :title="anime.title || 'TODO'"
|
|
:tooltipEnabled="true" :tooltipMetadata="anime"
|
|
:tooltipCollisionBoundary="tooltipCollisionBoundary" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|