Use detail endpoint

app/pages/index.vue

@@ -1,21 +1,18 @@
 <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 { refDebounced } from '@vueuse/core'
-import { getSearch } from '~/openapi/generated';
+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 getSearch({
+const { data: trendingAnimeData, status, error } = await getListKodik({
     composable: 'useFetch',
-    query: {
-        title: debouncedSearchTitle
-    }
 })
 </script>
 
@@ -48,6 +45,9 @@ const { data: trendingAnimeData, status, error } = await getSearch({
                     <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'"