SubTitle SubTitle.tsx

100% Statements 6/6

100% Branches 4/4

100% Functions 1/1

100% Lines 6/6

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 19x
 
19x
19x
 
1x
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { ReactElement, useRef } from "react";
 
import { ArtistList } from "components";
import { capitalizeFirstLetter, getYear } from "utils";
 
export default function SubTitle({
  artists,
  albumType,
  releaseYear,
}: {
  artists: SpotifyApi.ArtistObjectSimplified[];
  albumType?: SpotifyApi.AlbumObjectSimplified["album_type"];
  releaseYear?: string;
}): ReactElement {
  const spanRef = useRef<HTMLSpanElement>(null);
  const year = releaseYear && getYear(releaseYear);
 
  return (
    <span ref={spanRef} className="subTitle">
      {year && <>{year} · </>}
      {albumType && <>{capitalizeFirstLetter(albumType)} · </>}
      <ArtistList artists={artists} maxArtistsToShow={2} />
      <style jsx>
        {`
          span :global(a) {
            text-decoration: none;
            color: #ffffffb3;
            z-index: 3;
            position: relative;
          }
          span :global(a:hover),
          span :global(a:focus) {
            text-decoration: 1px solid underline;
            text-underline-offset: 1px;
          }
        `}
      </style>
    </span>
  );
}