glax/tranga-website
1
0
Fork 0
mirror of https://github.com/C9Glax/tranga-website.git synced 2025-10-15 09:50:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add "TrangaPage" composable

Browse Source
This commit is contained in:
glax
2025-10-14 21:08:30 +02:00
parent a622c7c45a
commit 39a1cb3857
13 changed files with 109 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
website/app/components/MangaDetailPage.vue
View File

@@ -1,7 +1,7 @@
<template>
<UPage class="h-full">
<TrangaPage v-bind="$props">
<template #left>
<div class="flex flex-col gap-2 p-4 bg-elevated">
<div class="flex flex-col gap-2">
<MangaCover v-if="manga" :manga="manga" class="self-center" />
<USkeleton v-else class="w-[240px] h-[350px]" />
<p v-if="manga" class="font-semibold text-xl">
@@ -23,29 +23,20 @@
<USkeleton v-else class="w-full h-30" />
</div>
</template>
<UPageBody class="relative min-sm:mr-12 max-sm:mx-4">
<div class="w-full flex flex-row justify-between">
<div>
<UButton variant="soft" :to="backPath ?? '/'" icon="i-lucide-arrow-left">Back</UButton>
<p v-if="title" class="text-3xl">{{ title }}</p>
</div>
<div v-if="manga" class="flex flex-row gap-2">
<slot name="actions" />
</div>
</div>
<slot />
</UPageBody>
</UPage>
<template #actions>
<slot name="actions" />
</template>
<slot />
</TrangaPage>
</template>
<script setup lang="ts">
import type { components } from '#open-fetch-schemas/api';
import TrangaPage, { type PageProps } from '~/components/TrangaPage.vue';
type Manga = components['schemas']['Manga'];
export interface MangaDetailPageProps {
export interface MangaDetailPageProps extends PageProps {
manga?: Manga;
title?: string;
backPath?: string;
}
defineProps<MangaDetailPageProps>();