elise
28 lines
851 B
TypeScript
28 lines
851 B
TypeScript
import NextImage, { ImageProps as NextImageProps } from "next/image";
|
|
import styles from "./image.module.scss";
|
|
|
|
type ImageProps = NextImageProps & {
|
|
attribution?: string | null;
|
|
caption?: string | null;
|
|
imageFormat?: string | null; // "original" | "bleed" | "fullWidth"
|
|
};
|
|
|
|
export function ImageFigure(props: ImageProps) {
|
|
const { attribution, caption, imageFormat, ...nextImageProps } = props;
|
|
return (
|
|
<figure
|
|
className={`${styles.image} ${imageFormat ? styles[imageFormat] : ""}`}
|
|
>
|
|
<div className={styles.imageWrapper}>
|
|
<NextImage {...nextImageProps} />
|
|
{attribution && <div className={styles.attribution}>{attribution}</div>}
|
|
</div>
|
|
{caption && <figcaption>{caption}</figcaption>}
|
|
</figure>
|
|
);
|
|
}
|
|
|
|
export function Image(props: NextImageProps) {
|
|
return <NextImage {...props} />;
|
|
}
|