feat: updates

packages/web/components/New/CoverRow.tsx

@@ -6,8 +6,20 @@ import { prefetchAlbum } from '@/web/api/hooks/useAlbum'
 import { prefetchPlaylist } from '@/web/api/hooks/usePlaylist'
 import { memo, useCallback } from 'react'
 import dayjs from 'dayjs'
+import ArtistInline from './ArtistsInLine'
 
-const Album = ({ album }: { album: Album }) => {
+type ItemTitle = undefined | 'name'
+type ItemSubTitle = undefined | 'artist' | 'year'
+
+const Album = ({
+  album,
+  itemTitle,
+  itemSubtitle,
+}: {
+  album: Album
+  itemTitle?: ItemTitle
+  itemSubtitle?: ItemSubTitle
+}) => {
   const navigate = useNavigate()
   const goTo = () => {
     navigate(`/album/${album.id}`)
@@ -16,6 +28,24 @@ const Album = ({ album }: { album: Album }) => {
     prefetchAlbum({ id: album.id })
   }
 
+  const title =
+    itemTitle &&
+    {
+      name: album.name,
+    }[itemTitle]
+
+  const subtitle =
+    itemSubtitle &&
+    {
+      artist: (
+        <ArtistInline
+          artists={album.artists}
+          hoverClassName='hover:text-white/50 transition-colors duration-400'
+        />
+      ),
+      year: dayjs(album.publishTime || 0).year(),
+    }[itemSubtitle]
+
   return (
     <div>
       <Image
@@ -25,12 +55,16 @@ const Album = ({ album }: { album: Album }) => {
         className='aspect-square rounded-24'
         onMouseOver={prefetch}
       />
-      <div className='line-clamp-2 mt-2 text-14 font-medium text-neutral-300'>
-        {album.name}
-      </div>
-      <div className='mt-1 text-14 font-medium text-neutral-700'>
-        {dayjs(album.publishTime || 0).year()}
-      </div>
+      {title && (
+        <div className='line-clamp-2 mt-2 text-14 font-medium text-neutral-300'>
+          {title}
+        </div>
+      )}
+      {subtitle && (
+        <div className='mt-1 text-14 font-medium text-neutral-700'>
+          {subtitle}
+        </div>
+      )}
     </div>
   )
 }
@@ -60,11 +94,15 @@ const CoverRow = ({
   playlists,
   title,
   className,
+  itemTitle,
+  itemSubtitle,
 }: {
   title?: string
   className?: string
   albums?: Album[]
   playlists?: Playlist[]
+  itemTitle?: ItemTitle
+  itemSubtitle?: ItemSubTitle
 }) => {
   return (
     <div className={className}>
@@ -78,7 +116,12 @@ const CoverRow = ({
       {/* Items */}
       <div className='grid grid-cols-3 gap-4 lg:gap-6 xl:grid-cols-4 2xl:grid-cols-5'>
         {albums?.map(album => (
-          <Album key={album.id} album={album} />
+          <Album
+            key={album.id}
+            album={album}
+            itemTitle={itemTitle}
+            itemSubtitle={itemSubtitle}
+          />
         ))}
         {playlists?.map(playlist => (
           <Playlist key={playlist.id} playlist={playlist} />