48 lines
2.1 KiB
TypeScript
48 lines
2.1 KiB
TypeScript
import Link from "next/link";
|
|
import { Disc3 } from "lucide-react";
|
|
import { api } from "@/lib/api";
|
|
import { Album } from "../types";
|
|
|
|
interface LibraryAlbumsGridProps {
|
|
albums: Album[];
|
|
}
|
|
|
|
export function LibraryAlbumsGrid({ albums }: LibraryAlbumsGridProps) {
|
|
return (
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 3xl:grid-cols-10 gap-4" data-tv-section="search-results-albums">
|
|
{albums.slice(0, 6).map((album, index) => (
|
|
<Link
|
|
key={album.id}
|
|
href={`/album/${album.id}`}
|
|
data-tv-card
|
|
data-tv-card-index={index}
|
|
tabIndex={0}
|
|
>
|
|
<div className="bg-[#121212] hover:bg-[#181818] transition-all p-4 rounded-lg group cursor-pointer">
|
|
<div className="aspect-square bg-[#181818] rounded-md mb-4 flex items-center justify-center overflow-hidden">
|
|
{album.coverUrl || album.albumId ? (
|
|
<img
|
|
src={api.getCoverArtUrl(
|
|
album.coverUrl || album.albumId,
|
|
300
|
|
)}
|
|
alt={album.title}
|
|
className="w-full h-full object-cover group-hover:scale-110 transition-all"
|
|
/>
|
|
) : (
|
|
<Disc3 className="w-12 h-12 text-gray-600" />
|
|
)}
|
|
</div>
|
|
<h3 className="text-base font-bold text-white line-clamp-1 mb-1">
|
|
{album.title}
|
|
</h3>
|
|
<p className="text-sm text-[#b3b3b3] line-clamp-1">
|
|
{album.artist?.name}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|