75 lines
2.5 KiB
TypeScript
75 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 { Cancion } from '@/types/types';
|
|
import { useState } from 'react';
|
|
|
|
export default function Gallery({ songs }: { songs: Cancion[] }) {
|
|
const [progress, setProgress] = useState(0);
|
|
const [isPlaying, setIsPlaying] = useState(false);
|
|
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={
|
|
<h2 className="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
|
|
Galeria Canciones
|
|
</h2>
|
|
}
|
|
>
|
|
<div className="p-2">
|
|
<div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
|
|
<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.cover}
|
|
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 onClick={() => setCurrentSong(song)}>
|
|
<AddIcon />
|
|
</PrimaryButton>
|
|
<SecondaryButton onClick={() => addToQueue(song)}>
|
|
<AddStackIcon />
|
|
</SecondaryButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Reproductor
|
|
song={currentSong}
|
|
setSong={setCurrentSong}
|
|
playlist={queue}
|
|
setplaylist={setQueue}
|
|
/>
|
|
</div>
|
|
</Authenticated>
|
|
);
|
|
}
|