58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import { ReactNode, CSSProperties } from 'react';
|
|
|
|
interface ProtectedImageProps {
|
|
src: string;
|
|
alt: string;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
width?: number;
|
|
height?: number;
|
|
showWatermark?: boolean;
|
|
priority?: boolean;
|
|
children?: ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Protected Image Component
|
|
* Wraps images with protection against downloading and copying
|
|
*/
|
|
export default function ProtectedImage({
|
|
src,
|
|
alt,
|
|
className = '',
|
|
style = {},
|
|
width,
|
|
height,
|
|
showWatermark = false,
|
|
children
|
|
}: ProtectedImageProps) {
|
|
const wrapperClass = `protected-image-wrapper ${showWatermark ? 'watermarked-image' : ''} ${className}`;
|
|
|
|
return (
|
|
<div className={wrapperClass} style={style}>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
width={width}
|
|
height={height}
|
|
draggable="false"
|
|
onContextMenu={(e) => e.preventDefault()}
|
|
onDragStart={(e) => e.preventDefault()}
|
|
style={{
|
|
WebkitUserSelect: 'none',
|
|
MozUserSelect: 'none',
|
|
msUserSelect: 'none',
|
|
userSelect: 'none',
|
|
pointerEvents: 'none'
|
|
}}
|
|
/>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|