commit d4c11d82f15a7b0d0e3567128d7b6c70cbfb0562 · indexx.dev/slices-teal-relay

+4 -1

src/AlbumItem.tsx

···

       1
       1
        
       import AlbumArt from "./AlbumArt";

     

       2
       2
       +
       import MusicBrainzLink from "./MusicBrainzLink";

     

       2
       3
        
       

     

       3
       4
        
       interface Artist {

     

       4
       5
        
         artistName: string;

     
···

       58
       59
        
       

     

       59
       60
        
               <div className="flex-1 min-w-0">

     

       60
       61
        
                 <h3 className="text-sm font-medium text-zinc-100 truncate">

     

       61
       61
       -
                   {releaseName}

     

       62
       62
       +
                   <MusicBrainzLink releaseMbId={releaseMbId}>

     

       63
       63
       +
                     {releaseName}

     

       64
       64
       +
                   </MusicBrainzLink>

     

       62
       65
        
                 </h3>

     

       63
       66
        
                 <p className="text-xs text-zinc-500 truncate">{artistNames}</p>

     

       64
       67
        
               </div>

+24

src/MusicBrainzLink.tsx

···

       1
       1
       +
       interface MusicBrainzLinkProps {

     

       2
       2
       +
         releaseMbId: string | null | undefined;

     

       3
       3
       +
         children: React.ReactNode;

     

       4
       4
       +
       }

     

       5
       5
       +
       

     

       6
       6
       +
       export default function MusicBrainzLink({

     

       7
       7
       +
         releaseMbId,

     

       8
       8
       +
         children,

     

       9
       9
       +
       }: MusicBrainzLinkProps) {

     

       10
       10
       +
         if (!releaseMbId) {

     

       11
       11
       +
           return <>{children}</>;

     

       12
       12
       +
         }

     

       13
       13
       +
       

     

       14
       14
       +
         return (

     

       15
       15
       +
           <a

     

       16
       16
       +
             href={`https://musicbrainz.org/release/${releaseMbId}`}

     

       17
       17
       +
             target="_blank"

     

       18
       18
       +
             rel="noopener noreferrer"

     

       19
       19
       +
             className="hover:text-violet-400 transition-colors"

     

       20
       20
       +
           >

     

       21
       21
       +
             {children}

     

       22
       22
       +
           </a>

     

       23
       23
       +
         );

     

       24
       24
       +
       }

+4 -1

src/TopTrackItem.tsx

···

       1
       1
        
       import AlbumArt from "./AlbumArt";

     

       2
       2
       +
       import MusicBrainzLink from "./MusicBrainzLink";

     

       2
       3
        
       

     

       3
       4
        
       interface Artist {

     

       4
       5
        
         artistName: string;

     
···

       55
       56
        
       

     

       56
       57
        
               <div className="flex-1 min-w-0">

     

       57
       58
        
                 <h3 className="text-sm font-medium text-zinc-100 truncate">

     

       58
       58
       -
                   {trackName}

     

       59
       59
       +
                   <MusicBrainzLink releaseMbId={releaseMbId}>

     

       60
       60
       +
                     {trackName}

     

       61
       61
       +
                   </MusicBrainzLink>

     

       59
       62
        
                 </h3>

     

       60
       63
        
                 <p className="text-xs text-zinc-500 truncate">{artistNames}</p>

     

       61
       64
        
               </div>

+4 -1

src/TrackItem.tsx

···

       1
       1
        
       import { graphql, useFragment } from "react-relay";

     

       2
       2
        
       import type { TrackItem_play$key } from "./__generated__/TrackItem_play.graphql";

     

       3
       3
        
       import AlbumArt from "./AlbumArt";

     

       4
       4
       +
       import MusicBrainzLink from "./MusicBrainzLink";

     

       4
       5
        
       

     

       5
       6
        
       interface TrackItemProps {

     

       6
       7
        
         play: TrackItem_play$key;

     
···

       45
       46
        
       

     

       46
       47
        
                 <div className="text-right min-w-0">

     

       47
       48
        
                   <p className="text-xs text-zinc-400 truncate">

     

       48
       48
       -
                     {data.releaseName}

     

       49
       49
       +
                     <MusicBrainzLink releaseMbId={data.releaseMbId}>

     

       50
       50
       +
                       {data.releaseName}

     

       51
       51
       +
                     </MusicBrainzLink>

     

       49
       52
        
                   </p>

     

       50
       53
        
                   <div className="flex items-center justify-end gap-2 mt-0.5 min-w-0 overflow-hidden">

     

       51
       54
        
                     {data.playedTime && (