hecho lo de galeria y arrglada tabla en songs

Signed-off-by: fede <federico.nicolas.polidoro@gmail.com>

resources/js/Pages/Gallery.tsx

@@ -4,31 +4,10 @@ import PrimaryButton from '@/Components/PrimaryButton';
 import Reproductor from '@/Components/Reproductor';
 import SecondaryButton from '@/Components/SecondaryButton';
 import Authenticated from '@/Layouts/AuthenticatedLayout';
+import { Cancion } from '@/types/types';
 import { useState } from 'react';
 
-export default function Gallery() {
-  const songs = [
-    {
-      id: 1,
-      title: 'Song 1',
-      artist: 'Artist 1',
-      coverArt:
-        'https://duckduckgo.com/?q=Metallica%20American%20heavy%20metal%20band&ia=images&iax=images',
-    },
-    {
-      id: 2,
-      title: 'Song 2',
-      artist: 'Artist 2',
-      coverArt: '/images/song2.jpg',
-    },
-    {
-      id: 3,
-      title: 'Song 3',
-      artist: 'Artist 3',
-      coverArt: '/images/song3.jpg',
-    },
-  ];
-
+export default function Gallery({ songs }: { songs: Cancion[] }) {
   const [progress, setProgress] = useState(0);
   const [isPlaying, setIsPlaying] = useState(false);
   const [cancionSeleccionada, setCancion] = useState({ title: '' });
@@ -40,16 +19,16 @@ export default function Gallery() {
         </h2>
       }
     >
-      <div className="py-12">
+      <div className="p-2">
         <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="grid max-h-[calc(100vh-250px)] grid-cols-1 gap-6 overflow-y-auto sm:grid-cols-2 lg:grid-cols-3">
             {songs.map((song) => (
               <div
                 key={song.id}
                 className="overflow-hidden rounded-lg bg-white shadow-lg dark:bg-gray-800"
               >
                 <img
-                  src={song.coverArt}
+                  src={song.cover}
                   alt={song.title}
                   className="h-48 w-full object-cover"
                 />
@@ -75,6 +54,7 @@ export default function Gallery() {
         </div>
         <Reproductor />
       </div>
+      c
     </Authenticated>
   );
 }