Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | 19x 19x 19x 19x 29x 21x 21x 21x 21x 32x 29x 29x 4x 25x 1x 1x | import { Fragment, ReactElement, useRef } from "react";
import Link from "next/link";
import { useTranslations } from "hooks";
import { ITrack, ITrackArtist } from "types/spotify";
import { conjuction, getIdFromUri } from "utils";
export interface IArtistListProps {
artists: ITrack["artists"];
maxArtistsToShow?: number;
onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
}
function getArtistId(artist: ITrackArtist): string | undefined {
return artist.id ?? getIdFromUri(artist.uri, "id");
}
export default function ArtistList({
artists,
maxArtistsToShow,
onClick,
}: Readonly<IArtistListProps>): ReactElement | null {
const artistsRef = useRef<HTMLAnchorElement>(null);
const { locale } = useTranslations();
if (!artists) return null;
return (
<span>
{conjuction(
artists
.slice(0, maxArtistsToShow ?? artists.length)
.filter((el) => el.name)
.map((artist) => {
const id = getArtistId(artist);
if (!id) {
return (
<span key={artist.name} ref={artistsRef} className="ArtistList">
{artist.name}
</span>
);
}
return (
<Fragment key={id}>
<Link
href={`/${
artist.type ?? getIdFromUri(artist.uri, "type") ?? "artist"
}/${id}`}
ref={artistsRef}
onClick={(e) => {
e.stopPropagation();
if (onClick) onClick(e);
}}
className="ArtistList"
>
{artist.name}
</Link>
</Fragment>
);
}),
locale
)}
<style jsx>{`
span :global(.ArtistList) {
color: inherit;
text-decoration: none;
}
span :global(.ArtistList:hover),
span :global(.ArtistList:focus) {
text-decoration: underline;
}
`}</style>
</span>
);
}
|