mirror of
https://github.com/GiriNeko/YesPlayMusic.git
synced 2025-12-16 05:08:04 +00:00
54 lines
1.3 KiB
TypeScript
54 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
|