mirror of
https://github.com/thiloho/thiloho.github.io.git
synced 2025-12-23 14:33:36 +01:00
33 lines
935 B
Plaintext
33 lines
935 B
Plaintext
---
|
|
interface Props {
|
|
title: string;
|
|
artist: string;
|
|
album: string;
|
|
youtubeLink: string;
|
|
index: number;
|
|
}
|
|
|
|
const { title, artist, album, youtubeLink, index } = Astro.props;
|
|
|
|
const uniqueArtists = [...new Set(artist.split(",").map((a) => a.trim()))].join(
|
|
", ",
|
|
);
|
|
|
|
const videoId = youtubeLink.split("v=")[1];
|
|
const thumbnail = `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`;
|
|
---
|
|
|
|
<a
|
|
href={youtubeLink}
|
|
class="relative mt-4 block bg-cover bg-center p-4 duration-300 after:absolute after:inset-0 after:z-0 after:bg-[rgba(255,255,255,0.75)] after:content-[''] first:mt-0 hover:scale-105 dark:after:bg-[rgba(38,38,38,0.75)]"
|
|
style={`word-break: break-word; background-image: url('${thumbnail}')`}
|
|
>
|
|
<div
|
|
class="relative z-10 flex flex-col gap-2 text-neutral-900 dark:text-white"
|
|
>
|
|
<p class="text-lg font-bold">{title}</p>
|
|
<p>{uniqueArtists}</p>
|
|
<p class="text-sm">{album}</p>
|
|
</div>
|
|
</a>
|