feat: updates

packages/web/pages/New/Artist/Header/LatestRelease.tsx

@@ -0,0 +1,97 @@
+import { resizeImage } from '@/web/utils/common'
+import dayjs from 'dayjs'
+import { cx, css } from '@emotion/css'
+import { useNavigate, useParams } from 'react-router-dom'
+import Image from '@/web/components/New/Image'
+import useArtistAlbums from '@/web/api/hooks/useArtistAlbums'
+import { useMemo } from 'react'
+
+const Album = () => {
+  const params = useParams()
+  const navigate = useNavigate()
+
+  const { data: albumsRaw, isLoading: isLoadingAlbums } = useArtistAlbums({
+    id: Number(params.id) || 0,
+    limit: 1000,
+  })
+
+  const album = useMemo(() => albumsRaw?.hotAlbums?.[0], [albumsRaw?.hotAlbums])
+
+  if (!album) {
+    return <></>
+  }
+
+  return (
+    <div
+      onClick={() => navigate(`/album/${album.id}`)}
+      className='flex rounded-24 bg-white/10 p-2.5'
+    >
+      <Image
+        src={resizeImage(album.picUrl, 'sm')}
+        className={cx(
+          'aspect-square',
+          css`
+            height: 60px;
+            width: 60px;
+            border-radius: 16px;
+          `
+        )}
+      />
+      <div className='flex-shrink-1 ml-2'>
+        <div className='line-clamp-1 text-16 font-medium text-night-100'>
+          {album.name}
+        </div>
+        <div className='mt-1 text-14 font-bold text-night-500'>
+          {album.type}
+          {album.size > 1 ? `· ${album.size} Tracks` : ''}
+        </div>
+        <div className='mt-1.5 text-12 font-medium text-night-500'>
+          {dayjs(album?.publishTime || 0).format('MMM DD, YYYY')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const Video = () => {
+  return (
+    <div className='mt-4 flex rounded-24 bg-white/10 p-2.5'>
+      <Image
+        src={resizeImage(
+          'https://p1.music.126.net/am47BH30IGQit_L2vYaArg==/109951167502760845.jpg',
+          'sm'
+        )}
+        className={cx(
+          css`
+            height: 60px;
+            width: 106px;
+            border-radius: 16px;
+          `
+        )}
+      />
+      <div className='flex-shrink-1 ml-2'>
+        <div className='line-clamp-2 text-16 font-medium text-night-100'>
+          Swedish House Mafia & The Weeknd Live at C...
+        </div>
+        <div className='mt-1.5 text-12 font-medium text-night-500'>
+          {dayjs().format('MMM DD, YYYY')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const LatestRelease = () => {
+  return (
+    <div className='mx-2.5 lg:mx-0'>
+      <div className='mt-7 mb-3 text-14 font-bold text-neutral-300'>
+        Latest Releases
+      </div>
+
+      <Album />
+      <Video />
+    </div>
+  )
+}
+
+export default LatestRelease