feat: updates

packages/web/components/New/CoverRow.tsx

@@ -0,0 +1,58 @@
+import { resizeImage } from '@/web/utils/common'
+import { cx } from '@emotion/css'
+import { useNavigate } from 'react-router-dom'
+import Image from './Image'
+
+const CoverRow = ({
+  albums,
+  playlists,
+  title,
+  className,
+}: {
+  title?: string
+  className?: string
+  albums?: Album[]
+  playlists?: Playlist[]
+}) => {
+  const navigate = useNavigate()
+
+  const goTo = (id: number) => {
+    if (albums) navigate(`/album/${id}`)
+    if (playlists) navigate(`/playlist/${id}`)
+  }
+
+  return (
+    <div className={className}>
+      {/* Title */}
+      {title && (
+        <h4 className='mb-6 text-14 font-bold uppercase dark:text-neutral-300'>
+          {title}
+        </h4>
+      )}
+
+      {/* Items */}
+      <div className='grid grid-cols-3 gap-10 xl:grid-cols-4 2xl:grid-cols-5'>
+        {albums?.map(album => (
+          <Image
+            onClick={() => goTo(album.id)}
+            key={album.id}
+            alt={album.name}
+            src={resizeImage(album?.picUrl || '', 'md')}
+            className='aspect-square rounded-24'
+          />
+        ))}
+        {playlists?.map(playlist => (
+          <Image
+            onClick={() => goTo(playlist.id)}
+            key={playlist.id}
+            alt={playlist.name}
+            src={resizeImage(playlist?.picUrl || '', 'md')}
+            className='aspect-square rounded-24'
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default CoverRow