57 lines
2.6 KiB
TypeScript
57 lines
2.6 KiB
TypeScript
import { Disc, Music, ChevronRight } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import { motion } from "motion/react";
|
|
import { Album } from "@/types";
|
|
|
|
interface AlbumSelectorProps {
|
|
albums: Album[];
|
|
selectedAlbum: Album | null;
|
|
onSelect: (album: Album) => void;
|
|
}
|
|
|
|
export function AlbumSelector({ albums, selectedAlbum, onSelect }: AlbumSelectorProps) {
|
|
if (albums.length === 0) return null;
|
|
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
|
{albums.map((album, i) => (
|
|
<motion.div
|
|
key={album.path}
|
|
initial={{ opacity: 0, scale: 0.9 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
transition={{ duration: 0.2, delay: i * 0.03 }}
|
|
onClick={() => onSelect(album)}
|
|
className={cn(
|
|
"group cursor-pointer flex flex-col gap-3 relative",
|
|
selectedAlbum?.path === album.path ? "opacity-80" : ""
|
|
)}
|
|
>
|
|
<div className="aspect-square rounded-lg bg-muted/20 overflow-hidden shadow-lg border border-white/5 group-hover:border-primary/50 group-hover:shadow-primary/10 transition-all duration-300 relative">
|
|
{album.coverPath ? (
|
|
<img
|
|
src={`/api/cover?path=${encodeURIComponent(album.coverPath)}`}
|
|
alt={album.name}
|
|
className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center bg-muted/10">
|
|
<Music className="w-16 h-16 text-muted-foreground/20" />
|
|
</div>
|
|
)}
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<h3 className="font-semibold text-sm leading-tight truncate group-hover:text-primary transition-colors">
|
|
{album.name}
|
|
</h3>
|
|
<p className="text-xs text-muted-foreground truncate font-mono opacity-60">
|
|
{album.path.split('/').pop()}
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|