girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-16 21:28:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-06-08 00:07:04 +08:00
parent d09c5fd171
commit 133881d287
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
28 changed files with 389 additions and 115 deletions
Download patch file Download diff file Expand all files Collapse all files

100
packages/web/components/New/ArtistRow.tsx
View file

@ -2,41 +2,79 @@ import { resizeImage } from '@/web/utils/common'
import { css, cx } from '@emotion/css'
import Image from './Image'
const ArtistRow = ({
artists,
title,
className,
}: {
artists: Artist[] | undefined
title?: string
className?: string
}) => {
const Artist = ({ artist }: { artist: Artist }) => {
return (
<div className={className}>
{/* Title */}
{title && (
<h4 className='mb-6 text-14 font-bold uppercase dark:text-neutral-300'>
{title}
</h4>
)}
{/* Artists */}
<div className='grid grid-cols-5 gap-10'>
{artists?.map(artist => (
<div key={artist.id} className='text-center'>
<Image
alt={artist.name}
src={resizeImage(artist.img1v1Url, 'md')}
className='aspect-square rounded-full'
/>
<div className='line-clamp-1 mt-2.5 text-14 font-bold text-neutral-700 dark:text-neutral-600'>
{artist.name}
</div>
</div>
))}
<div className='text-center'>
<Image
alt={artist.name}
src={resizeImage(artist.img1v1Url, 'md')}
className={cx(
'aspect-square rounded-full',
css`
min-width: 96px;
min-height: 96px;
`
)}
/>
<div className='line-clamp-1 mt-2.5 text-12 font-medium text-neutral-700 dark:text-neutral-600 lg:text-14 lg:font-bold'>
{artist.name}
</div>
</div>
)
}
const ArtistRow = ({
artists,
title,
className,
placeholderRow,
}: {
artists: Artist[] | undefined
title?: string
className?: string
placeholderRow?: number
}) => {
return (
<div className={className}>
{/* Title */}
{title && (
<h4 className='mb-6 text-12 font-medium uppercase dark:text-neutral-300 lg:text-14 lg:font-bold'>
{title}
</h4>
)}
{/* Artists */}
{artists && (
<div className='no-scrollbar -ml-2.5 flex w-screen overflow-x-scroll lg:ml-auto lg:grid lg:w-auto lg:grid-cols-5 lg:gap-10'>
{artists.map(artist => (
<div
className='mr-5 first-of-type:ml-2.5 last-of-type:mr-2.5 lg:mr-0'
key={artist.id}
>
<Artist artist={artist} key={artist.id} />
</div>
))}
</div>
)}
{/* Placeholder */}
{placeholderRow && !artists && (
<div className='no-scrollbar -ml-2.5 flex w-screen overflow-x-scroll lg:ml-auto lg:grid lg:w-auto lg:grid-cols-5 lg:gap-10'>
{[...new Array(placeholderRow * 5).keys()].map(i => (
<div
className='mr-5 first-of-type:ml-2.5 last-of-type:mr-2.5 lg:mr-0'
key={i}
>
<div className='aspect-square w-full rounded-full bg-white dark:bg-neutral-800' />
<div className='mt-2.5 text-14 font-bold text-transparent'>
PLACE
</div>
</div>
))}
</div>
)}
</div>
)
}
export default ArtistRow