import { useNavigate } from 'react-router-dom' import cx from 'classnames' const ArtistInline = ({ artists, className, disableLink, onClick, }: { artists: Artist[] className?: string disableLink?: boolean onClick?: (artistId: number) => void }) => { if (!artists) return
const navigate = useNavigate() const handleClick = (id: number) => { if (id === 0 || disableLink) return if (!onClick) { navigate(`/artist/${id}`) } else { onClick(id) } } return (
{artists.map((artist, index) => ( handleClick(artist.id)} className={cx({ 'hover:underline': !!artist.id && !disableLink, })} > {artist.name} {index < artists.length - 1 ? ', ' : ''}  ))}
) } export default ArtistInline