From 604e2c9c7fa91951b7f1de58a6e30d9778b21554 Mon Sep 17 00:00:00 2001
From: dannyzou18 <dzou3814@gmail.com>
Date: Tue, 6 Feb 2024 16:30:24 -0500
Subject: [PATCH] created simple song component for queue

---
 src/queue.rs     | 21 ++++++++++++++-------
 style/queue.scss |  5 +++--
 2 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/queue.rs b/src/queue.rs
index b194df4..2e69b55 100644
--- a/src/queue.rs
+++ b/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<_>>())
 					}
diff --git a/style/queue.scss b/style/queue.scss
index 21df7cf..486a18d 100644
--- a/style/queue.scss
+++ b/style/queue.scss
@@ -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 {