feat: updates

packages/web/pages/Artist/Header/ArtistInfo.tsx

@@ -0,0 +1,90 @@
+import useIsMobile from '@/web/hooks/useIsMobile'
+import useAppleMusicArtist from '@/web/hooks/useAppleMusicArtist'
+import { cx, css } from '@emotion/css'
+import { useTranslation } from 'react-i18next'
+
+const ArtistInfo = ({
+  artist,
+  isLoading,
+}: {
+  artist?: Artist
+  isLoading: boolean
+}) => {
+  const { t } = useTranslation()
+
+  const isMobile = useIsMobile()
+  const { data: artistFromApple, isLoading: isLoadingArtistFromApple } =
+    useAppleMusicArtist({
+      id: artist?.id,
+      name: artist?.name,
+    })
+
+  return (
+    <div>
+      {/* Name */}
+      {isLoading ? (
+        <div className=' text-28 font-semibold text-transparent lg:text-32'>
+          <span className='rounded-full bg-white/10'>PLACEHOLDER</span>
+        </div>
+      ) : (
+        <div className='text-28 font-semibold text-white/70 lg:text-32'>
+          {artist?.name}
+        </div>
+      )}
+
+      {/* Type */}
+      {isLoading ? (
+        <div className='mt-2.5 text-24 font-medium text-transparent lg:mt-6'>
+          <span className='rounded-full bg-white/10'>Artist</span>
+        </div>
+      ) : (
+        <div className='mt-2.5 text-24 font-medium text-white/40 lg:mt-6'>
+          Artist
+        </div>
+      )}
+
+      {/* Counts */}
+      {isLoading ? (
+        <div className='mt-1 text-12 font-medium text-transparent'>
+          <span className='rounded-full bg-white/10'>PLACEHOLDER12345</span>
+        </div>
+      ) : (
+        <div className='mt-1 text-12 font-medium text-white/40'>
+          {t('common.track-with-count', { count: artist?.musicSize })} ·{' '}
+          {t('common.album-with-count', { count: artist?.albumSize })} ·{' '}
+          {t('common.video-with-count', { count: artist?.mvSize })}
+        </div>
+      )}
+
+      {/* Description */}
+      {!isMobile &&
+        (isLoading || isLoadingArtistFromApple ? (
+          <div
+            className={cx(
+              'line-clamp-5 mt-6 text-14 font-bold text-transparent',
+              css`
+                height: 86px;
+              `
+            )}
+          >
+            <span className='rounded-full bg-white/10'>
+              PLACEHOLDER1234567890
+            </span>
+          </div>
+        ) : (
+          <div
+            className={cx(
+              'line-clamp-5 mt-6 text-14 font-bold text-white/40',
+              css`
+                height: 86px;
+              `
+            )}
+          >
+            {artistFromApple?.attributes?.artistBio || artist?.briefDesc}
+          </div>
+        ))}
+    </div>
+  )
+}
+
+export default ArtistInfo