/* eslint-disable @next/next/no-img-element */
interface CreatorSquareBlurOgImageProps {
imageUrl: string | null;
imageWidth?: number | null;
imageHeight?: number | null;
canvasWidth: number;
canvasHeight: number;
}
function clamp(value: number, min: number, max: number): number {
return Math.min(max, Math.max(min, value));
}
export default function CreatorSquareBlurOgImage({
imageUrl,
imageWidth,
imageHeight,
canvasWidth,
canvasHeight,
}: CreatorSquareBlurOgImageProps) {
if (!imageUrl) {
return (
);
}
const ratio =
imageWidth && imageHeight && imageWidth > 0 && imageHeight > 0 ? imageWidth / imageHeight : 1;
// This renderer is used for near-square images:
// keep full image height and fill horizontal side space with blur.
const normalizedRatio = clamp(ratio, 0.8, 1.2);
const foregroundWidth = Math.min(canvasWidth, Math.round(canvasHeight * normalizedRatio));
return (
);
}