35 lines
1.2 KiB
Vue
35 lines
1.2 KiB
Vue
<template>
|
|
<article class="relative">
|
|
<main
|
|
class="absolute top-0 backdrop-blur-sm z-40 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
|
|
<!-- Cover -->
|
|
<figure class="flex-1 overflow-hidden rounded-t-xl">
|
|
<img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
|
|
</figure>
|
|
|
|
<!-- Body -->
|
|
<div class="p-3 text-center bg-white rounded-b-xl">
|
|
<h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
|
|
<p class="text-sm text-neutral-500 truncate">
|
|
{{ props.track.artist.name }}
|
|
</p>
|
|
</div>
|
|
</main>
|
|
|
|
<footer
|
|
class="absolute top-0 ml-32 backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
|
|
<!-- Back -->
|
|
<div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
|
|
<img src="/favicon.svg" />
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { Track } from '~~/types/types'
|
|
|
|
const props = defineProps<{ track: Track }>()
|
|
const coverUrl = `https://f4.bcbits.com/img/${props.track.artist.coverId}_4.jpg`
|
|
</script> |