66 lines
1.9 KiB
JavaScript
66 lines
1.9 KiB
JavaScript
// components.js
|
|
const Cards = {
|
|
|
|
|
|
|
|
TrackCard: (trackList) => {
|
|
const items = trackList.map(track => `
|
|
<li class="list-group-item bg-dark py-4 text-light d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="fw-bold text-capitalize">${track.name}</span>
|
|
</div>
|
|
<div>
|
|
<span class="me-3">2 credits</span>
|
|
<button class="btn btn-sm btn-outline-light" data-uri="${track.uri}" onclick="loadTrack(this)">
|
|
<i class="fa fa-play"></i>
|
|
</button>
|
|
</div>
|
|
</li>
|
|
`).join('');
|
|
|
|
return `
|
|
<div class="card jukebox-card bg-dark text-light">
|
|
<div class="card-header fs-4 fw-bolder text-uppercase">
|
|
All Songs <span class="fw-lighter fs-5">${trackList.length}</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<ul class="list-group list-group-flush song-list">
|
|
${items}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
`;
|
|
},
|
|
|
|
PlaylistCard: (playlist) => `
|
|
<div class="card playlist-card">
|
|
<img src="${playlist.image || ''}" alt="${playlist.name}" class="playlist-art"/>
|
|
<div class="playlist-info">
|
|
<strong>${playlist.name}</strong>
|
|
<small>${playlist.tracks} tracks</small>
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
ArtistCard: (artist) => `
|
|
<div class="card d-flex justify-content-end align-items-start px-5 text-align-center flex-column artist-card text-light">
|
|
<div class="fs-1 fw-bold text-uppercase">${artist.name}</div>
|
|
|
|
<hr class="w-100 mb-5">
|
|
<div class="fw-bold text-uppercase">
|
|
RELATED ARTISTS<br><br>
|
|
|
|
</div>
|
|
</div>
|
|
`,
|
|
|
|
AlbumCard: (album) => `
|
|
<div class="card album-card">
|
|
<img src="${album.image || ''}" alt="${album.title}" class="album-art"/>
|
|
<div class="album-info">
|
|
<strong>${album.title}</strong>
|
|
<small>${album.year || ''}</small>
|
|
</div>
|
|
</div>
|
|
`
|
|
};
|