dev.2ha.me/dev.2ha.me
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

fix(bento): add skeleton to SilhouetteHover

Browse Source
This commit is contained in:
Jason
2023-09-26 16:40:16 -07:00
parent dcd69c9686
commit 0e448bde64
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/bento/SilhouetteHover.tsx
View File

@@ -1,4 +1,4 @@
import Image from 'next/image' import Image from '../Image'
interface SilhouetteHoverProps { interface SilhouetteHoverProps {
silhouetteSrc: string silhouetteSrc: string
@@ -25,18 +25,22 @@ const SilhouetteHover = ({
src={silhouetteSrc} src={silhouetteSrc}
alt={silhouetteAlt} alt={silhouetteAlt}
fill={true} fill={true}
noRelative
className={`rounded-3xl ${ className={`rounded-3xl ${
objectCover ? 'object-cover' : 'object-contain' objectCover ? 'object-cover' : 'object-contain'
} transition-opacity delay-75 duration-300 group-hover:opacity-0`} } transition-opacity delay-75 duration-300 group-hover:opacity-0`}
skeletonClassName="rounded-3xl z-[1]"
unoptimized unoptimized
/> />
<Image <Image
src={mainSrc} src={mainSrc}
alt={mainAlt} alt={mainAlt}
fill={true} fill={true}
noRelative
className={`rounded-3xl ${ className={`rounded-3xl ${
objectCover ? 'object-cover' : 'object-contain' objectCover ? 'object-cover' : 'object-contain'
} opacity-0 transition-opacity delay-75 duration-300 group-hover:opacity-100`} } opacity-0 transition-opacity delay-75 duration-300 group-hover:opacity-100`}
skeletonClassName="rounded-3xl z-[1]"
unoptimized unoptimized
/> />
{children} {children}