Fix linting

This commit is contained in:
carlobortolan 2025-01-25 21:35:00 +01:00
parent 038f6bc26c
commit d287871e48
No known key found for this signature in database
GPG Key ID: 574D9F10F0EED1BE
4 changed files with 23 additions and 6 deletions

View File

@ -55,7 +55,8 @@ export default function FullscreenButton({
title="Toggle Fullscreen"
className={clsx(
className,
'text-medium absolute bottom-2 right-2 bg-white p-2 rounded hidden md:block',
'text-medium absolute bottom-2 right-2 bg-white p-2 rounded',
'hidden md:block',
)}
icon={isFullscreen ? <MdFullscreenExit size={18} />
: <MdFullscreen size={18} />}

View File

@ -4,7 +4,15 @@ import 'viewerjs/dist/viewer.css';
import { clsx } from 'clsx/lite';
import FullscreenButton from '../FullscreenButton';
export default function ImageActions({ children, enableImageActions = false, className }: { children: React.ReactNode, enableImageActions?: boolean, className?: string }) {
export default function ImageActions({
children,
enableImageActions = false,
className,
}: {
children: React.ReactNode;
enableImageActions?: boolean;
className?: string;
}) {
const containerRef = useRef<HTMLDivElement>(null);
const viewerRef = useRef<Viewer | null>(null);
@ -46,9 +54,14 @@ export default function ImageActions({ children, enableImageActions = false, cla
background-image: none;
}
`}</style>
<div className={clsx(className, enableImageActions && 'cursor-zoom-in')} ref={containerRef} >
<div
className={clsx(className, enableImageActions && 'cursor-zoom-in')}
ref={containerRef}
>
{children}
{enableImageActions && <FullscreenButton imageRef={containerRef}/>}
{enableImageActions && (
<FullscreenButton imageRef={containerRef} />
)}
</div>
</>
);

View File

@ -10,7 +10,10 @@ export default function ImageLarge(props: ImageProps) {
...rest
} = props;
return (
<ImageActions enableImageActions={enableImageActions} className="flex relative items-center justify-center h-full">
<ImageActions
enableImageActions={enableImageActions}
className="flex relative items-center justify-center h-full"
>
<ImageWithFallback {...{
...rest,
blurCompatibilityLevel: blurCompatibilityMode ? 'high' : 'none',

View File

@ -104,6 +104,6 @@ export default function ImageWithFallback(props: ImageProps & {
onLoad,
onError,
}} />
</div>
</div>
);
}