Update song page to use TailwindCSS

src/pages/songpage.rs

@@ -15,38 +15,34 @@ use crate::util::state::GlobalState;
 use std::rc::Rc;
 use std::borrow::Borrow;
 
-const PLAY_BTN_SIZE: &str = "3rem";
-
 #[component]
 pub fn SongPage() -> impl IntoView {
     let params = use_params_map();
 
     view! {
-        <div class="song-container home-component">
-            {move || params.with(|params| {
-                match params.get("id").map(|id| id.parse::<i32>()) {
-                    Some(Ok(id)) => {
-                        Either::Left(view! { <SongDetails id /> })
-                    },
-                    Some(Err(e)) => {
-                        Either::Right(view! {
-                            <Error<String>
-                                title="Invalid Song ID"
-                                error=e.to_string()
-                            />
-                        })
-                    },
-                    None => {
-                        Either::Right(view! {
-                            <Error<String>
-                                title="No Song ID"
-                                message="You must specify a song ID to view its page."
-                            />
-                        })
-                    }
+        {move || params.with(|params| {
+            match params.get("id").map(|id| id.parse::<i32>()) {
+                Some(Ok(id)) => {
+                    Either::Left(view! { <SongDetails id /> })
+                },
+                Some(Err(e)) => {
+                    Either::Right(view! {
+                        <Error<String>
+                            title="Invalid Song ID"
+                            error=e.to_string()
+                        />
+                    })
+                },
+                None => {
+                    Either::Right(view! {
+                        <Error<String>
+                            title="No Song ID"
+                            message="You must specify a song ID to view its page."
+                        />
+                    })
                 }
-            })}
-        </div>
+            }
+        })}
     }
 }
 
@@ -91,9 +87,6 @@ fn SongDetails(#[prop(into)] id: Signal<i32>) -> impl IntoView {
 
 #[component]
 fn SongOverview(song: frontend::Song) -> impl IntoView {
-    let liked = RwSignal::new(song.like_dislike.map(|ld| ld.0).unwrap_or(false));
-    let disliked = RwSignal::new(song.like_dislike.map(|ld| ld.1).unwrap_or(false));
-
     let playing = RwSignal::new(false);
     let icon = Signal::derive(move || {
         if playing.get() {
@@ -128,18 +121,18 @@ fn SongOverview(song: frontend::Song) -> impl IntoView {
     };
 
     view! {
-        <div class="song-header">
-            <img class="song-image" src=song.image_path />
-            <h1>{song.title}</h1>
+        <div class="flex">
+            <div class="relative w-35 h-35">
+                <img src=song.image_path />
+                <Icon icon on:click={toggle_play_song} {..}
+                    class="control w-15 h-15 absolute top-1/2 left-1/2 translate-[-50%]" />
+            </div>
+            <div class="self-center p-2">
+                <h1 class="text-4xl">{song.title}</h1>
+                <p><SongArtists artists=song.artists /></p>
+                <p><SongAlbum album=song.album /></p>
+            </div>
         </div>
-        <div class="song-actions">
-            <button on:click=toggle_play_song>
-                <Icon width=PLAY_BTN_SIZE height=PLAY_BTN_SIZE icon {..} class="controlbtn" />
-            </button>
-            <SongLikeDislike song_id=song.id liked disliked /><br/>
-        </div>
-        <p><SongArtists artists=song.artists /></p>
-        <p><SongAlbum album=song.album /></p>
         <p>{format!("Duration: {}:{:02}", song.duration / 60, song.duration % 60)}</p>
     }
 }