girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-17 13:48:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-06-12 15:29:14 +08:00
parent 196a974a64
commit 8f4c3d8e5b
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
24 changed files with 572 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

41
packages/web/components/New/Image.tsx
View file

@ -22,7 +22,7 @@ const Image = ({
className?: string
alt: string
lazyLoad?: boolean
placeholder?: 'artist' | 'album' | 'playlist' | 'podcast' | 'blank' | null
placeholder?: 'artist' | 'album' | 'playlist' | 'podcast' | 'blank' | false
onClick?: (e: React.MouseEvent<HTMLImageElement>) => void
onMouseOver?: (e: React.MouseEvent<HTMLImageElement>) => void
animation?: boolean
@ -48,6 +48,7 @@ const Image = ({
? {
animate,
initial: { opacity: 0 },
exit: { opacity: 0 },
transition,
}
: {}
@ -60,22 +61,30 @@ const Image = ({
: {}
return (
<div className={cx('relative overflow-hidden', className)}>
<div
className={cx(
'overflow-hidden',
className,
className?.includes('absolute') === false && 'relative'
)}
>
{/* Image */}
<motion.img
alt={alt}
className='absolute inset-0 h-full w-full'
src={src}
srcSet={srcSet}
sizes={sizes}
decoding='async'
loading={lazyLoad ? 'lazy' : undefined}
onError={onError}
onLoad={onLoad}
onClick={onClick}
onMouseOver={onMouseOver}
{...motionProps}
/>
<AnimatePresence>
<motion.img
alt={alt}
className='absolute inset-0 h-full w-full'
src={src}
srcSet={srcSet}
sizes={sizes}
decoding='async'
loading={lazyLoad ? 'lazy' : undefined}
onError={onError}
onLoad={onLoad}
onClick={onClick}
onMouseOver={onMouseOver}
{...motionProps}
/>
</AnimatePresence>
{/* Placeholder / Error fallback */}
<AnimatePresence>