mirror of
https://github.com/qier222/YesPlayMusic.git
synced 2025-02-28 04:44:01 +08:00
62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
import { css, cx } from '@emotion/css'
|
|
import Image from './Image'
|
|
import { resizeImage } from '@/web/utils/common'
|
|
import useBreakpoint from '@/web/hooks/useBreakpoint'
|
|
import { useNavigate } from 'react-router-dom'
|
|
import { prefetchAlbum } from '@/web/api/hooks/useAlbum'
|
|
|
|
const sizes = {
|
|
small: {
|
|
sm: 'sm',
|
|
md: 'sm',
|
|
lg: 'sm',
|
|
xl: 'sm',
|
|
'2xl': 'md',
|
|
},
|
|
large: {
|
|
sm: 'md',
|
|
md: 'md',
|
|
lg: 'md',
|
|
xl: 'md',
|
|
'2xl': 'lg',
|
|
},
|
|
} as const
|
|
|
|
const CoverWall = ({
|
|
albums,
|
|
}: {
|
|
albums: { id: number; coverUrl: string; large: boolean }[]
|
|
}) => {
|
|
const navigate = useNavigate()
|
|
const breakpoint = useBreakpoint()
|
|
|
|
return (
|
|
<div
|
|
className={cx(
|
|
'grid w-full grid-flow-row-dense grid-cols-4 lg:grid-cols-8',
|
|
css`
|
|
gap: 13px;
|
|
`
|
|
)}
|
|
>
|
|
{albums.map(album => (
|
|
<Image
|
|
src={resizeImage(
|
|
album.coverUrl,
|
|
sizes[album.large ? 'large' : 'small'][breakpoint]
|
|
)}
|
|
key={album.id}
|
|
className={cx(
|
|
'aspect-square h-full w-full rounded-20 lg:rounded-24',
|
|
album.large && 'col-span-2 row-span-2'
|
|
)}
|
|
onClick={() => navigate(`/album/${album.id}`)}
|
|
onMouseOver={() => prefetchAlbum({ id: album.id })}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CoverWall
|