61 lines
2.1 KiB
TypeScript
61 lines
2.1 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 [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="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>
|
|
<AddIcon />
|
|
</PrimaryButton>
|
|
<SecondaryButton>
|
|
<AddStackIcon />
|
|
</SecondaryButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<Reproductor />
|
|
</div>
|
|
c
|
|
</Authenticated>
|
|
);
|
|
}
|