Files
tabler/shared/components/cards/music/TrackInfo.astro
T

30 lines
707 B
Plaintext

---
import tracks from '@data/tracks.json'
import { requireIndex } from '@shared/lib/array'
interface Props {
trackId?: number
}
const { trackId = 5 } = Astro.props
const track = requireIndex(tracks, trackId)
const trackImage = requireIndex(track.album.images, 1)
---
<div class="card">
<div class="row row-0">
<div class="col-auto">
<img src={`./static/tracks/${trackImage.path}`} class="rounded-start" alt={track.name} width="80" height="80" />
</div>
<div class="col">
<div class="card-body">
{track.name}
<div class="text-secondary">
{track.artists.map((artist) => artist.name).join(', ')}
</div>
</div>
</div>
</div>
</div>