patch

frontend/src/components/{Playlist.css → PlayQueue.css}

@@ -49,7 +49,7 @@
 
 .track-title {
   cursor: pointer;
-  font-size: 1rem;
+  font-size: .8rem;
   color: var(--text-color);
 }
 

frontend/src/components/PlaylQueue.js

@@ -4,8 +4,8 @@ import React, { useState } from "react";
 import { useMusicPlayer } from "@/context/MusicPlayerContext";
 import { formatTitle } from "@/lib/utils";
 import { FaTrash } from "react-icons/fa";
-import { TbPlaylistX } from "react-icons/tb";
-import "./Playlist.css";
+import { TbPlaylistX, TbX } from "react-icons/tb";
+import "./PlayQueue.css";
 
 const PlayQueue = () => {
   const {
@@ -23,6 +23,9 @@ const PlayQueue = () => {
   const handlePlayTrack = (src, title) => {
     initializePlayer(src, title);
   };
+  const handleIsPlayQueueOpen = () =>{
+    setIsPlayEueOpen(!isPlayEueOpen);
+  };
 
   const handleClearPlaylist = () => {
     if (window.confirm("Are you sure you want to clear the play queue?")) {
@@ -43,7 +46,7 @@ const PlayQueue = () => {
   return (
     isPlayEueOpen && (
       <div className="playlist-container">
-        <h2>Play Queue</h2>
+        <div className="flex justify-between"><h2>Play Queue</h2> <button onClick={handleIsPlayQueueOpen}><TbX className="size-6"/> </button> </div>
         <div className="playlist-action-container">
           <button onClick={() => setIsModalOpen(true)} className="save-button">
             Save to Playlist