añadido crd para Song y transladada la logica de /gallery a un controller

resources/js/Pages/Gallery.tsx

@@ -1,4 +1,8 @@
+import AddIcon from '@/Components/Icons/AddIcon';
+import AddStackIcon from '@/Components/Icons/AddStackIcon';
+import PrimaryButton from '@/Components/PrimaryButton';
 import Reproductor from '@/Components/Reproductor';
+import SecondaryButton from '@/Components/SecondaryButton';
 import Authenticated from '@/Layouts/AuthenticatedLayout';
 import { useState } from 'react';
 
@@ -8,7 +12,8 @@ export default function Gallery() {
       id: 1,
       title: 'Song 1',
       artist: 'Artist 1',
-      coverArt: '/images/song1.jpg',
+      coverArt:
+        'https://duckduckgo.com/?q=Metallica%20American%20heavy%20metal%20band&ia=images&iax=images',
     },
     {
       id: 2,
@@ -26,7 +31,7 @@ export default function Gallery() {
 
   const [progress, setProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
-
+  const [cancionSeleccionada, setCancion] = useState({ title: '' });
   return (
     <Authenticated
       header={
@@ -55,6 +60,14 @@ export default function Gallery() {
                   <p className="text-sm text-gray-600 dark:text-gray-300">
                     {song.artist}
                   </p>
+                  <div className="mt-1 flex gap-1">
+                    <PrimaryButton>
+                      <AddIcon />
+                    </PrimaryButton>
+                    <SecondaryButton>
+                      <AddStackIcon />
+                    </SecondaryButton>
+                  </div>
                 </div>
               </div>
             ))}