81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
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';
|
|
|
|
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',
|
|
},
|
|
];
|
|
|
|
const [progress, setProgress] = useState(0);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
const [cancionSeleccionada, setCancion] = useState({ title: '' });
|
|
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 className="mt-1 flex gap-1">
|
|
<PrimaryButton>
|
|
<AddIcon />
|
|
</PrimaryButton>
|
|
<SecondaryButton>
|
|
<AddStackIcon />
|
|
</SecondaryButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Reproductor />
|
|
</div>
|
|
</Authenticated>
|
|
);
|
|
}
|