ahora reproduce canciones

resources/js/Pages/Gallery.tsx

@@ -10,7 +10,17 @@ import { useState } from 'react';
 export default function Gallery({ songs }: { songs: Cancion[] }) {
   const [progress, setProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
-  const [cancionSeleccionada, setCancion] = useState({ title: '' });
+  const [queue, setQueue] = useState<Cancion[]>([]);
+  const [currentSong, setCurrentSong] = useState<Cancion>();
+
+  const addToQueue = (song: Cancion) => {
+    if (queue.length === 0) {
+      setQueue([song]);
+    } else {
+      setQueue([...queue, song]);
+    }
+  };
+
   return (
     <Authenticated
       header={
@@ -40,10 +50,10 @@ export default function Gallery({ songs }: { songs: Cancion[] }) {
                     {song.artist}
                   </p>
                   <div className="mt-1 flex gap-1">
-                    <PrimaryButton>
+                    <PrimaryButton onClick={() => setCurrentSong(song)}>
                       <AddIcon />
                     </PrimaryButton>
-                    <SecondaryButton>
+                    <SecondaryButton onClick={() => addToQueue(song)}>
                       <AddStackIcon />
                     </SecondaryButton>
                   </div>
@@ -52,9 +62,13 @@ export default function Gallery({ songs }: { songs: Cancion[] }) {
             ))}
           </div>
         </div>
-        <Reproductor />
+        <Reproductor
+          song={currentSong}
+          setSong={setCurrentSong}
+          playlist={queue}
+          setplaylist={setQueue}
+        />
       </div>
-      c
     </Authenticated>
   );
 }