20 lines
508 B
Vue
20 lines
508 B
Vue
<template>
|
|
<section class="flex justify-center items-center h-screen">
|
|
<div class="aspect-square size-[100vmin] max-h-screen max-w-screen overflow-hidden">
|
|
<Platine :card="card" />
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Card } from '~~/types/types'
|
|
|
|
const { data: card, pending, error } = await useFetch<Card>('/api/card/random')
|
|
|
|
useHead({
|
|
title: computed(() =>
|
|
card.value ? `${card.value.artist} - ${card.value.title}` : 'Loading...'
|
|
)
|
|
})
|
|
</script>
|