57 lines
2.0 KiB
TypeScript
57 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { PlayableCard } from "@/components/ui/PlayableCard";
|
|
import { Disc3 } from "lucide-react";
|
|
import { api } from "@/lib/api";
|
|
import type { Album } from "../types";
|
|
|
|
interface DiscographyProps {
|
|
albums: Album[];
|
|
colors: any;
|
|
onPlayAlbum: (albumId: string, albumTitle: string) => Promise<void>;
|
|
}
|
|
|
|
export function Discography({ albums, colors, onPlayAlbum }: DiscographyProps) {
|
|
if (!albums || albums.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<section>
|
|
<h2 className="text-xl font-bold mb-4">Discography</h2>
|
|
<div data-tv-section="discography" className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
{albums.map((album, index) => {
|
|
const subtitle = [
|
|
album.year,
|
|
album.trackCount && `${album.trackCount} tracks`,
|
|
]
|
|
.filter(Boolean)
|
|
.join(" • ");
|
|
|
|
return (
|
|
<PlayableCard
|
|
key={album.id}
|
|
href={`/album/${album.id}`}
|
|
coverArt={
|
|
album.coverArt
|
|
? api.getCoverArtUrl(album.coverArt, 300)
|
|
: null
|
|
}
|
|
title={album.title}
|
|
subtitle={subtitle}
|
|
placeholderIcon={
|
|
<Disc3 className="w-12 h-12 text-gray-600" />
|
|
}
|
|
badge="owned"
|
|
circular={false}
|
|
colors={colors}
|
|
onPlay={() => onPlayAlbum(album.id, album.title)}
|
|
tvCardIndex={index}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|