feat: updates

packages/web/pages/Artist/ArtistAlbums.tsx

@@ -0,0 +1,53 @@
+import useArtistAlbums from '@/web/api/hooks/useArtistAlbums'
+import CoverRow from '@/web/components/CoverRow'
+import React from 'react'
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
+
+const ArtistAlbum = () => {
+  const { t } = useTranslation()
+  const params = useParams()
+
+  const { data: albumsRaw, isLoading: isLoadingAlbums } = useArtistAlbums({
+    id: Number(params.id) || 0,
+    limit: 1000,
+  })
+
+  const pages = useMemo(() => {
+    const pages: Album[][] = []
+    albumsRaw?.hotAlbums.forEach((album, index) => {
+      const pageNo = Math.floor(index / 12)
+      if (!pages[pageNo]) {
+        pages[pageNo] = [album]
+      } else {
+        pages[pageNo].push(album)
+      }
+    })
+    return pages
+  }, [albumsRaw?.hotAlbums])
+
+  return (
+    <div>
+      <div className='mb-4 mt-11 text-12 font-medium uppercase text-neutral-300'>
+        {t`common.album_other`}
+      </div>
+
+      <div className='no-scrollbar flex gap-6 overflow-y-hidden overflow-x-scroll'>
+        {pages.map((page, index) => (
+          <CoverRow
+            key={index}
+            albums={page}
+            itemTitle='name'
+            itemSubtitle='year'
+            className='h-full w-full flex-shrink-0'
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const memoized = React.memo(ArtistAlbum)
+memoized.displayName = 'ArtistAlbum'
+export default memoized