created simple song component for queue

This commit is contained in:
Danny Zou 2024-02-06 16:30:24 -05:00 committed by Ethan Girouard
parent fd49ee3a0f
commit 604e2c9c7f
Signed by: eta357
GPG Key ID: 7BCDC36DFD11C146
2 changed files with 17 additions and 9 deletions

View File

@ -2,6 +2,19 @@ use crate::playstatus::PlayStatus;
use leptos::leptos_dom::*;
use leptos::*;
#[component]
fn Song(song_image_path: String, song_title: String, song_artist: String) -> impl IntoView {
view!{
<div class="queue-song">
<img src={song_image_path} alt={song_title.clone()} />
<div class="queue-song-info">
<h3>{song_title}</h3>
<p>{song_artist}</p>
</div>
</div>
}
}
#[component]
pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
@ -17,13 +30,7 @@ pub fn Queue(status: RwSignal<PlayStatus>) -> impl IntoView {
{
status.with(|status| status.queue.iter()
.map(|song| view! {
<div class="queue-song">
<img src={song.image_path.clone()} alt={song.name.clone()}/>
<div class="queue-song-info">
<h3>{song.name.clone()}</h3>
<p>{song.artist.clone()}</p>
</div>
</div>
<Song song_image_path=song.image_path.clone() song_title=song.name.clone() song_artist=song.artist.clone() />
})
.collect::<Vec<_>>())
}

View File

@ -5,8 +5,9 @@
top: 0;
right: 0;
width: 300px;
height: 55.3rem;
background-color: $queue-background-color; /* Queue background color */
height: 45rem;
overflow: hidden;
background-color: white;/*$queue-background-color; Queue background color */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
.queue-header {