source: frontend/src/components/search/AlbumResult.tsx@ 8ccb07e

import { useNavigate } from "react-router-dom";
import type { Album } from "../../utils/types";

interface AlbumResultProps {
        album: Album;
}

const AlbumResult = ({ album }: AlbumResultProps) => {
        const navigate = useNavigate();

        return (
                <div
                        onClick={() => navigate(`/collection/album/${album.id}`)}
                        className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group"
                >
                        <img
                                src={album.cover || "/favicon.png"}
                                alt={album.title}
                                className="w-12 h-12 rounded object-cover"
                                onError={(e) => {
                                        (e.target as HTMLImageElement).src = "/favicon.png";
                                }}
                        />
                        <div className="flex-1 min-w-0">
                                <p className="text-white font-medium truncate">{album.title}</p>
                                <p className="text-sm text-gray-400 truncate">
                                        Album • {album.releasedBy} • {album.songs?.length ?? 0} songs
                                </p>
                        </div>
                        <span className="text-xs text-gray-500 uppercase tracking-wider">
                                {album.genre}
                        </span>
                </div>
        );
};

export default AlbumResult;