anyame-frontend-vue/app/pages/anime/[id].vue

<script setup lang="ts">
import Badge from '~/components/ui/badge/Badge.vue';
import HoverableImage from '~/components/ui/hoverable-image/HoverableImage.vue';
import Tabs from '~/components/ui/tabs/Tabs.vue';
import TabsContent from '~/components/ui/tabs/TabsContent.vue';
import TabsList from '~/components/ui/tabs/TabsList.vue';
import TabsTrigger from '~/components/ui/tabs/TabsTrigger.vue';
import { getDetail } from '~/openapi/generated';

const { data, status, error } = await getDetail({
    composable: 'useFetch',
    query: {
        id: 'ba9c5699-a720-412a-958e-3d5555d97b8f'
    }
})
</script>
<template>
    <div v-if="data">
        <div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 bg-muted p-4 sm:p-6 md:p-8 lg:p-12 xl:max-h-5/6">
            <div class="flex flex-col items-center lg:items-start gap-4 lg:gap-6 lg:min-w-72 xl:min-w-96 ">
                <div class="max-w-xs lg:max-w-sm xl:max-w-md">
                    <NuxtImg :src="data.posterUrl" class="w-full object-cover aspect-3/4 rounded-lg shadow-lg"
                        sizes="sm:100vw md:50vw lg:448px xl:512px" />
                </div>

                <div class="grid grid-cols-1 lg:grid-cols-1 gap-2 w-full">
                    <Button class="w-full">
                        Watch Now
                    </Button>
                </div>
            </div>

            <div class="flex-1">
                <div class="space-y-4 xl:h-full">
                    <h3 class="text-xl md:text-2xl xl:text-3xl font-bold tracking-tight">
                        {{ data.title }}
                    </h3>
                    <div class="xl:h-full overflow-scroll">
                        <p
                            class="text-base lg:text-lg text-muted-foreground leading-relaxed md:leading-loose whitespace-pre-line transition-colors hover:text-foreground">
                            {{ data.description }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 p-4 sm:p-6 md:p-8 lg:p-12">
            <div class="bg-muted text-muted-foreground text-xl space-y-4 min-w-96 p-8">
                <div>
                    <p class="font-bold">Format</p>
                    {{ data.kind }}
                </div>
                <div>
                    <p class="font-bold">Episodes</p>
                    {{ data.episodes }}
                </div>
                <div>
                    <p class="font-bold">Duration</p>
                    {{ data.duration }}
                </div>
                <div>
                    <p class="font-bold">Status</p>
                    <Badge>{{ data.status }}</Badge>
                </div>
                <div>
                    <p class="font-bold">Release</p>
                    {{ data.releasedOn }}
                </div>
                <div>
                    <p class="font-bold">Translations</p>
                    <Badge v-for="translation in data.translations" class="mx-2">{{ translation.title }}
                    </Badge>
                </div>
                <div>
                    <p class="font-bold">Genres</p>
                    <Badge variant="secondary" v-for="genre in data.genres" class="mx-2">{{ genre }}</Badge>
                </div>
                <div>
                    <p class="font-bold">Rating</p>
                    {{ data.rating }}
                </div>
                <div>
                    <p class="font-bold">Producers</p>
                    <p v-for="producer in data.producers">{{ producer }}</p>
                </div>
                <div>
                    <p class="font-bold">Source</p>
                    {{ data.origin }}
                </div>
            </div>
            <Tabs default-value="overview" class="w-full h-fit">
                <TabsList class="w-full flex-1 mb-4">
                    <TabsTrigger value="overview">
                        Overview
                    </TabsTrigger>
                    <TabsTrigger value="characters">
                        Characters
                    </TabsTrigger>
                    <TabsTrigger value="staff">
                        Staff
                    </TabsTrigger>
                </TabsList>
                <TabsContent value="overview">
                    <span class="text-xl font-semibold">Relations</span>
                    <div class="flex flex-wrap gap-4 w-full">
                        <HoverableImage v-for="relation in data.related" :src="relation.posterUrl!" :alt="relation.name"
                            :title="relation.type" size="xsm" variant="default">
                            <TooltipContent side="right" align="center" :side-offset="8" class="z-50"
                                tooltipColor="muted" :includeArrow="false">
                                <div class="space-y-2">
                                    <h4 class="font-semibold text-xl">
                                        {{ relation.name }}
                                    </h4>

                                    <div class="text-lg text-muted-foreground">
                                        <p>{{ relation.type }}</p>
                                    </div>
                                </div>
                            </TooltipContent>
                        </HoverableImage>
                    </div>
                    <span class="text-xl font-semibold">Characters</span>
                    <div class="flex flex-wrap gap-4 w-full">
                        <HoverableImage v-for="character in data.characters" :width="200" :height="300"
                            :src="character.posterUrl!" :alt="character.type" :title="character.name" size="xsm"
                            variant="default">
                            <TooltipContent side="right" align="center" :side-offset="8" class="z-50"
                                tooltipColor="muted" :includeArrow="false">
                                <div class="space-y-2">
                                    <h4 class="font-semibold text-xl">
                                        {{ character.name }}
                                    </h4>

                                    <div class="text-lg text-muted-foreground">
                                        <p>{{ character.type }}</p>
                                    </div>
                                </div>
                            </TooltipContent>
                        </HoverableImage>
                    </div>
                </TabsContent>
                <TabsContent value="characters">

                </TabsContent>
                <TabsContent value="staff">
                </TabsContent>
            </Tabs>
        </div>
    </div>
</template>