created simple song component for queue
This commit is contained in:
parent
fd49ee3a0f
commit
604e2c9c7f
21
src/queue.rs
21
src/queue.rs
@ -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<_>>())
|
||||
}
|
||||
|
@ -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 {
|
||||
|
Loading…
x
Reference in New Issue
Block a user