initial commit

resources/js/Pages/Gallery.tsx

@@ -0,0 +1,67 @@
+import Reproductor from '@/Components/Reproductor';
+import Authenticated from '@/Layouts/AuthenticatedLayout';
+import { useState } from 'react';
+
+export default function Gallery() {
+  const songs = [
+    {
+      id: 1,
+      title: 'Song 1',
+      artist: 'Artist 1',
+      coverArt: '/images/song1.jpg',
+    },
+    {
+      id: 2,
+      title: 'Song 2',
+      artist: 'Artist 2',
+      coverArt: '/images/song2.jpg',
+    },
+    {
+      id: 3,
+      title: 'Song 3',
+      artist: 'Artist 3',
+      coverArt: '/images/song3.jpg',
+    },
+  ];
+
+  const [progress, setProgress] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  return (
+    <Authenticated
+      header={
+        <h2 className="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
+          Galeria Canciones
+        </h2>
+      }
+    >
+      <div className="py-12">
+        <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">
+            {songs.map((song) => (
+              <div
+                key={song.id}
+                className="overflow-hidden rounded-lg bg-white shadow-lg dark:bg-gray-800"
+              >
+                <img
+                  src={song.coverArt}
+                  alt={song.title}
+                  className="h-48 w-full object-cover"
+                />
+                <div className="p-4">
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+                    {song.title}
+                  </h3>
+                  <p className="text-sm text-gray-600 dark:text-gray-300">
+                    {song.artist}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <Reproductor />
+      </div>
+    </Authenticated>
+  );
+}