37 lines
810 B
TypeScript
37 lines
810 B
TypeScript
import React, { useState } from 'react';
|
|
import { Box, BoxProps } from './primitives/Box';
|
|
import { ImagePlaceholder } from './ImagePlaceholder';
|
|
|
|
export interface ImageProps extends Omit<BoxProps<'img'>, 'children'> {
|
|
src: string;
|
|
alt: string;
|
|
fallbackSrc?: string;
|
|
fallbackComponent?: React.ReactNode;
|
|
}
|
|
|
|
export const Image = ({
|
|
src,
|
|
alt,
|
|
fallbackSrc,
|
|
fallbackComponent,
|
|
...props
|
|
}: ImageProps) => {
|
|
const [error, setError] = useState(false);
|
|
|
|
if (error) {
|
|
if (fallbackComponent) return <>{fallbackComponent}</>;
|
|
if (fallbackSrc) return <Box as="img" src={fallbackSrc} alt={alt} {...props} />;
|
|
return <ImagePlaceholder />;
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
as="img"
|
|
src={src}
|
|
alt={alt}
|
|
onError={() => setError(true)}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|