Loadingpage

MangaCardList
Manga with Tag Page

website/app/components/LoadingPage.vue

@@ -0,0 +1,20 @@
+<template>
+    <UPageBody v-if="loading">
+        <UPageHero title="Loading..." />
+    </UPageBody>
+    <UPageBody v-else v-bind="$props">
+        <template v-for="(_, slotName) in $slots" #[slotName]>
+            <slot :name="slotName" />
+        </template>
+    </UPageBody>
+</template>
+
+<script setup lang="ts">
+import type { PageBodyProps } from '#ui/components/PageBody.vue';
+
+export interface LoadingPageProps extends PageBodyProps {
+    loading: boolean;
+}
+
+defineProps<LoadingPageProps>();
+</script>

website/app/components/MangaCardList.vue

@@ -0,0 +1,16 @@
+<template>
+    <MangaCard v-for="(m, i) in manga" :key="m.key" :manga="m" :expanded="i === expanded" @click="expanded = expanded === i ? -1 : i">
+        <template #actions="forManga">
+            <UButton :to="`manga/${forManga.key}`">Details</UButton>
+        </template>
+    </MangaCard>
+</template>
+
+<script setup lang="ts">
+import type { components } from '#open-fetch-schemas/api';
+type Manga = components['schemas']['Manga'];
+type MinimalManga = components['schemas']['MinimalManga'];
+
+const expanded = ref(-1);
+defineProps<{manga?: (MinimalManga | Manga)[]}>()
+</script>

website/app/components/MangaDetailPage.vue

@@ -11,7 +11,7 @@
                 <USkeleton v-else class="text-xl h-20 w-full" />
                 <div v-if="manga" class="flex flex-row gap-1 flex-wrap">
                     <UBadge v-for="author in manga.authors" :key="author.key" variant="outline" color="neutral">{{ author.name }}</UBadge>
-                    <UBadge v-for="tag in manga.tags" :key="tag" variant="outline" color="primary">{{ tag }}</UBadge>
+                    <UBadge v-for="tag in manga.tags" :key="tag" variant="outline" color="primary"><NuxtLink :to="`/manga/tag/${tag}`">{{ tag }}</NuxtLink></UBadge>
                     <NuxtLink v-for="link in manga.links" :key="link.key" :to="link.url" external no-prefetch>
                         <UBadge variant="outline" color="secondary">{{ link.provider }}</UBadge>
                     </NuxtLink>