44 lines
1.2 KiB
TypeScript
44 lines
1.2 KiB
TypeScript
import { UploadImageFragment } from "graphql/generated";
|
|
import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img";
|
|
import { Immutable } from "helpers/types";
|
|
import { ImageProps } from "next/image";
|
|
import { MouseEventHandler } from "react";
|
|
|
|
interface Props {
|
|
className?: string;
|
|
image?: UploadImageFragment | string;
|
|
quality?: ImageQuality;
|
|
alt?: ImageProps["alt"];
|
|
onClick?: MouseEventHandler<HTMLImageElement>;
|
|
}
|
|
|
|
export function Img(props: Immutable<Props>): JSX.Element {
|
|
const {
|
|
className,
|
|
image,
|
|
quality = ImageQuality.Small,
|
|
alt,
|
|
onClick,
|
|
} = props;
|
|
|
|
if (typeof image === "string") {
|
|
return (
|
|
<img className={className} src={image} alt={alt ?? ""} loading="lazy" />
|
|
);
|
|
} else if (image?.width && image.height) {
|
|
const imgSize = getImgSizesByQuality(image.width, image.height, quality);
|
|
return (
|
|
<img
|
|
className={className}
|
|
src={getAssetURL(image.url, quality)}
|
|
alt={alt ?? image.alternativeText ?? ""}
|
|
width={imgSize.width}
|
|
height={imgSize.height}
|
|
loading="lazy"
|
|
onClick={onClick}
|
|
/>
|
|
);
|
|
}
|
|
return <></>;
|
|
}
|