strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move ImageActions component from ImageLarge.tsx to PhotoLarge.tsx and revert ImageProps

Browse Source
This commit is contained in:
carlobortolan 2025-01-25 21:52:36 +01:00
parent a64240f3ad
commit 6f924a7bb1
No known key found for this signature in database
GPG Key ID: 574D9F10F0EED1BE
3 changed files with 23 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/image/ImageLarge.tsx
View File

@ -1,25 +1,18 @@
import { IMAGE_WIDTH_LARGE, ImageProps } from '.';
import ImageWithFallback from './ImageWithFallback';
import ImageActions from './ImageActions';
export default function ImageLarge(props: ImageProps) {
const {
aspectRatio,
blurCompatibilityMode,
enableImageActions = false,
...rest
} = props;
return (
<ImageActions
enableImageActions={enableImageActions}
className="flex relative items-center justify-center h-full"
>
<ImageWithFallback {...{
...rest,
blurCompatibilityLevel: blurCompatibilityMode ? 'high' : 'none',
width: IMAGE_WIDTH_LARGE,
height: Math.round(IMAGE_WIDTH_LARGE / aspectRatio),
}} />
</ImageActions>
<ImageWithFallback {...{
...rest,
blurCompatibilityLevel: blurCompatibilityMode ? 'high' : 'none',
width: IMAGE_WIDTH_LARGE,
height: Math.round(IMAGE_WIDTH_LARGE / aspectRatio),
}} />
);
};
};

1
src/components/image/index.ts
View File

@ -14,5 +14,4 @@ export interface ImageProps {
alt: string
blurDataURL?: string
priority?: boolean
enableImageActions?: boolean
}

27
src/photo/PhotoLarge.tsx
View File

@ -36,6 +36,7 @@ import { useRef } from 'react';
import useOnVisible from '@/utility/useOnVisible';
import PhotoDate from './PhotoDate';
import { useAppState } from '@/state/AppState';
import ImageActions from '@/components/image/ImageActions';
export default function PhotoLarge({
photo,
@ -136,18 +137,22 @@ export default function PhotoLarge({
? 'h-[80%]'
: 'h-[90%]',
)}>
<ImageLarge
className={clsx(arePhotosMatted && 'h-full')}
imgClassName={clsx(arePhotosMatted &&
'object-contain w-full h-full')}
alt={altTextForPhoto(photo)}
src={photo.url}
aspectRatio={photo.aspectRatio}
blurDataURL={photo.blurData}
blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
priority={priority}
<ImageActions
enableImageActions={enableImageActions}
/>
className="flex relative items-center justify-center h-full"
>
<ImageLarge
className={clsx(arePhotosMatted && 'h-full')}
imgClassName={clsx(arePhotosMatted &&
'object-contain w-full h-full')}
alt={altTextForPhoto(photo)}
src={photo.url}
aspectRatio={photo.aspectRatio}
blurDataURL={photo.blurData}
blurCompatibilityMode={doesPhotoNeedBlurCompatibility(photo)}
priority={priority}
/>
</ImageActions>
</div>
</Link>}
contentSide={